在Inkscape中展平SVG矩阵变换 [英] Flattening SVG matrix transforms in Inkscape

问题描述

我有一个免费的剪贴画SVG文件，该文件最初是在Inkscape中创建的，我正在对其进行修改以用于Windows 8 JavaScript游戏.它包含无数路径的实例，并在周围的组上应用了矩阵变换，如下所示:

I have a free clip art SVG file originally created in Inkscape which I'm making modifications to for use in a Windows 8 JavaScript game. It contains numerous instances of a path with a matrix transform applied on a surrounding group, like this:

<g transform="matrix(0.443,0.896,-0.896,0.443,589.739,-373.223)">
    <path d="M486,313s27-9,43-29l26,4,1,23-22,5s-25-6-48-3z" />
</g>

我想通过预先将其应用于Inkscape中的路径来平整该变换，以减少动画期间的浏览器工作.但是，当我将6个矩阵值插入Inkscape的A B C D E F参数中并应用它时，它为路径提供了与IE10引擎完全不同的旋转和缩放比例.

I want to flatten that transform by applying it in advance to the path in Inkscape, to reduce browser work during animation. However when I plug the 6 matrix values into the A B C D E F parameters in Inkscape and apply it, it gives the path a completely different rotation and scaling to what the IE10 engine does.

我已多次检查是否正确映射了6个值.我在做什么错了?

I have checked numerous times that I have the 6 values mapped correctly. What am I doing wrong?

确定，这是IE10和Inkscape的屏幕截图的前后.对于IE10情况，SVG直接位于否则为空的HTML文档的主体内部(在Firefox中呈现完全相同).在Inkscape中，我只是打开了仅包含path元素的之前" SVG文件，选择了路径，然后将6个矩阵变换值插入到对象">变换">矩阵"中. 我对矩阵知之甚少，我只想能够以与浏览器相同的方式预先应用这些转换，并且理想地了解为什么Inkscape会有差异.谢谢.

OK, here are before and after screenshots from IE10 and Inkscape. For the IE10 case, the SVG resides directly inside the body of an otherwise empty HTML document (the rendering is exactly the same in Firefox). In Inkscape, I simply opened the "before" SVG file which contains only the path element, selected the path, and plugged in the 6 matrix transform values into Object > Transform > Matrix. I know very little about matrices, I just want to be able to pre-apply these transformations in the same way the browser does, and ideally to understand why there is a difference in Inkscape. Thanks.

推荐答案

简短答案

在Inkscape中键入转换矩阵参数时，请确保已选中编辑当前矩阵"，因为如果将新的转换矩阵应用于对象，则实际上是将这个新矩阵与该矩阵的现有转换矩阵相乘.对象，因此请确保对其进行编辑.

Short answer

When typing the transformation matrix params in Inkscape, make sure you have "Edit current matrix" checked, since if you apply a new transformation matrix to an object, you're actually multiplying this new matrix with the existing transformation matrix of the object, so make sure you edit it instead.

如何自己重新计算所有内容.

How to recalculate everything yourself.

首先，让我们尝试并稍微了解一下转换矩阵. 变换矩阵是用于将仿射变换(保留直线的变换)应用于向量的快速而巧妙的工具.
因此，如果您有一个向量(例如2d坐标)和一个转换矩阵，并将它们相乘，最终将得到转换坐标，并应用转换矩阵中定义的转换.

计算x'和y'的方法如下:

First let us try and understand the transformation matrices a bit. A transformation matrix is a quick and clever tool for applying affine transformations ( transformation which preserves straight lines) to a vector.
So, if you have a vector (say, 2d coordinates) and a transformation matrix, and multiply the two together, you will end up with transformed coordinates, with the transformations defined in the transformation matrix, applied.

Calculating x' and y' is done like so:

x' = a*x + c*y + e 
y' = b*x + d*y + f

接下来，我们需要稍微了解一下svg格式.
根据 w3c svg规范，matrix转换恰好将这6个参数(a，b，c，d，e，f)作为参数.
因此，从您的示例中，

Next, we need to understand the svg format a bit.
According to the w3c svg spec the matrix transform takes exactly those 6 parameters (a,b,c,d,e,f) as arguments.
Therefore, from your example,

<g transform="matrix(0.443,0.896,-0.896,0.443,589.739,-373.223)">

我们具有以下转换矩阵参数:

we have the following transformation matrix params:

a=0.443
b=0.896
c=-0.896
d=0.443
e=589.739
f=-373.223

现在，如果我们有以下示例坐标:x=27, y=-9，则可以使用以前定义的转换矩阵像这样对它进行转换:

Now, if we have the following example coordinate: x=27, y=-9, we can transform it, by using the previously defined transformation matrix like this:

x' = a*x + c*y + e 
x' = 0.443*27 + -0.896*-9 + 589.739
x' = 609.764

y' = b*x + d*y + f
y' = 0.896*27 + 0.443*-9 -373.223
y' = −353.018

整洁，是吗?您可以在此处

Neat, huh? You can get more info here

但这还不是全部.我们还需要了解svg路径数据.
根据 w3c svg路径规范，路径数据中的每个字母代表一个操作说明.跟随指令的每个数字对代表一个坐标值.

But that is not all. We also need to understand svg path data.
According to the w3c svg path dspecification each letter in the path data represents an instruction. And each of the number pairs that follow an instruction represent a coordinate value.

在您的示例中，我们具有以下路径:

From your example, we have the following path:

<path d="M486,313s27-9,43-29l26,4,1,23-22,5s-25-6-48-3z" />

在这里，我们看到此路径对象使用一条绝对moveto指令(大写 M )，一条相对的smooth curveto三次贝塞尔曲线(小写 s )，一条相对lineto指令(小写的 l )和另一条相对smooth curveto三次贝塞尔曲线的相对指令，后跟closepath指令(小写的 z ).

Here we see that this path object uses one absolute moveto instruction (uppercase M), a relative smooth curveto cubic Bézier curve (lowercase s), a relative lineto instruction (lowercase l), and another relative smooth curveto cubic Bézier curve instruction, followed by a closepath instruction (lowercase z).

M486,313转换为绝对移动到x = 486，y = 313
s27-9,43-29的读取有点复杂，因为省略了一些逗号，因为如果负数为负，则不需要它们，因此减号充当了逗号-不管怎么说，它转换为相对平滑贝塞尔曲线x = 27，y = -9，x = 43，y = -29 (一个目标点和一个控制点)
依此类推.

M486,313 is translated to absolute moveto x=486, y=313
s27-9,43-29 is a bit more complicated to read because some comas are omitted because they're not needed if the negative number is negative, so the minus sign acts as a coma - anyways, it translates to relative smooth bezier curveto x=27, y=-9, x=43, y=-29 (one destination point and one control point)
And so on.

那么，我们如何从您的svg组中应用和删除转换矩阵?像这样:

So, how do we apply and remove the transformation matrix from your svg group? Like so:

// we read the transformation matrix params
// <g transform="matrix(0.443,0.896,-0.896,0.443,589.739,-373.223)">
a=0.443
b=0.896
c=-0.896
d=0.443
e=589.739
f=-373.223

// we read the path data, and transform each instruction    
// <path d="M486,313s27-9,43-29l26,4,1,23-22,5s-25-6-48-3z" />

M486,313 绝对要移至

x' = a*x + c*y + e = a*486 + c*313 + e = 524.589
y' = b*x + d*y + f = b*486 + d*313 + f = 200.892

现在转到说明 M524.589,200.892

S27-9,43-29 -使曲线平滑，对每个坐标重复相同的过程，但是将e和f(平移参数)设置为0，因为这是相对的说明不是绝对的.
现在是
s20.025,20.205,45.033,25.680999999999997

S27-9,43-29 - smooth curveto, repeat the same process for each coordinate, but set the e and f (translation parameters) to 0, since it's a relative instruction not an absolute.
It is now
s20.025,20.205,45.033,25.680999999999997

l26,4,1,23-22,5
将成为
l7.934000000000001,25.067999999999998，-20.165,11.085，-14.226，-17.497

l26,4,1,23-22,5
will become
l7.934000000000001,25.067999999999998,-20.165,11.085,-14.226,-17.497

s-25-6-48-3
将成为
s-5.698999999999999，-25.058000000000003，-18.576，-44.337

s-25-6-48-3
will become
s-5.698999999999999,-25.058000000000003,-18.576,-44.337

z 仍为 z

因此，转换后的路径将是:

So the resulting transformed path will be:

<path d="M524.589,200.892s20.025,20.205,45.033,25.680999999999997l7.934000000000001,25.067999999999998,-20.165,11.085,-14.226,-17.497s-5.698999999999999,-25.058000000000003,-18.576,-44.337z" />

我希望这对您有意义.

这篇关于在Inkscape中展平SVG矩阵变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！