首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >解析SVG变换矩阵分解

解析SVG变换矩阵分解
EN

Stack Overflow用户
提问于 2013-04-13 01:39:47
回答 1查看 1.2K关注 0票数 1

我需要解析SVG (只是简单的东西),剩下的唯一要做的就是从矩阵变换中正确地提取位置和角度。我知道这个问题已经被问了很多次,我相信我已经看过了很多答案,文件等,但仍然不能很好地处理它。下面是我准备的最简单的例子:

我已经创建了1000x1000文件(所有数字在px中),并把一个100x100大小的矩形放在100,100位置。它已经生成了以下SVG文件(我已经删除了style attrib。和父标签)。文件中没有其他转换:

代码语言:javascript
复制
    <rect
       width="100"
       height="100"
       x="100"
       y="100" />

然后我已经将矩形旋转了33度(使用'transform‘inkscape工具)。SVG代码如下所示:

代码语言:javascript
复制
   <rect
       width="100"
       height="100"
       x="-5.8952699"
       y="157.49644"
       transform="matrix(0.83867057,-0.54463904,0.54463904,0.83867057,0,0)" />

现在,我的目标是从矩阵中提取位置和角度,所以基本上我想要返回以下值: x:100,y:100,角度:33。为了做到这一点,我假设了以下公式:

代码语言:javascript
复制
sx=sqrt(a^2+b^2)
sy=sqrt(c^2+d^2)

t=atan(c/d) OR t=atan(-b/a)
t=acos(a) if MATRIX is PURE

x' = tx + sx*(COS(t)*x-SIN(t)*y)
y' = ty + sy*(SIN(t)*x+COS(t)*y)

结果是:t= 0.575958787 (33度)-非常好

然而,x'=-90.72230563,y'=128.8770646,这就是我完全困惑的地方--为什么不是100,100呢?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-04-13 03:44:01

下面是如何找到坐标的方法。我在这里使用Python进行计算。

在旋转中心为(0,0)的情况下应用矩阵变换。坐标(-5.895,157.496)是正方形需要的位置,因此如果将矩形旋转33度,旋转中心在(0,0)处,它将最终绕其中心旋转33度。

首先,看起来你在计算旋转角度上没有问题。我们只会专注于如何弄清楚位置。

让我们从我们所知道的开始:

代码语言:javascript
复制
Python 2.7.3 (default, Aug  1 2012, 05:14:39) 
[GCC 4.6.3] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> import math
>>> c = math.cos(33 * math.pi / 180)
>>> s = math.sin(33 * math.pi / 180)
>>> c
0.838670567945424
>>> s
0.5446390350150271
>>> x0 = -5.8952699
>>> y0 = 157.49644

这些是旋转前正方形左上角的坐标。正方形围绕它的中心旋转,我们想找出它的中心旋转到哪里:

代码语言:javascript
复制
>>> x1 = x0 + 50
>>> y1 = y0 + 50
>>> x1
44.1047301
>>> y1
207.49644

现在,旋转正方形的中心:

代码语言:javascript
复制
>>> x2 = c * x1 + s * y1
>>> y2 = -s * x1 + c * y1
>>> x2
149.9999998927001
>>> y2
149.9999995401914

从这里可以清楚地看出,如果正方形没有旋转,我们如何到达正方形的左上角。

代码语言:javascript
复制
>>> x3 = x2 - 50
>>> y3 = y2 - 50
>>> x3
99.99999989270009
>>> y3
99.9999995401914
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15977591

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档