Question

假设我将此svg路径（某些图标）作为字符串：

"M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.027,0,14.534-6.507,14.534-14.534C30.534,7.973,24.027,1.466,16,1.466zM16,28.792c-1.549,0-2.806-1.256-2.806-2.806s1.256-2.806,2.806-2.806c1.55,0,2.806,1.256,2.806,2.806S17.55,28.792,16,28.792zM16,21.087l-7.858-6.562h3.469V5.747h8.779v8.778h3.468L16,21.087z"

我可以扩展它（例如使用raphael.js），如下所示：

icon = paper.path("M16,1.466C7.973,...").attr({fill: "#000", stroke: "none"});
icon.transform("s4T50,50");

这最后一行缩放图像x4，并将整个内容向下移动到右边。

到目前为止一切顺利，但我需要在svg文件中使用生成的路径。

所以我的问题：如何在转换完成后返回结果或计算路径？

Answer 1

函数Raphael.transformPath似乎就是你要找的东西。

icon = paper.path(Raphael.transformPath("M16,1.466C7.973,...", "s4T50,50")).attr({fill: "#000", stroke: "none"});

Answer 2

请检查我的回答here和测试床here。

有一个函数flatten_transformations（）可以烘焙（或应用）转换到路径。它可以处理所有路径段（也是弧形）。您可以选择是否所有路径段都转换为M：s和C：s，或者它们是否保持原样。 H和V是唯一不能保留的，它们必须转换为L：s，因为变换可以使垂直和水平线变为非垂直和非水平。您还可以选择是将坐标转换为相对坐标还是绝对坐标以及转换精度。

如果这样的扁平化功能是Raphaël的一部分会很好。

Answer 3

路径保持完全相同，因此您无法在此获得所需内容。

你假设拉斐尔在转换时循环通过点和比例坐标。但是，它没有这样做 - 相反，它将转换函数应用于渲染器。

例如，在.transform("s4T50,50");生成的路径是在DOM中之后：

<path 
    style="" 
    fill="#000000" 
    stroke="none" 
    d="M16,1.466...39V14.525H23.858L16,21.087Z" 
    transform="matrix(4,0,0,4,2,2)" 
    stroke-width="0.25"
/>

现在，我甚至试图想象它是如何在VML中起作用的，但是，c'est la vie。无论如何，你可以得到的是与icon.getBBox()不同的边界框 - 该部分对于屏幕像素坐标系是真实的。原始信息，但有帮助：

        before transform       after icon.transform()

height  29.067999999999998     116.27199999999999
width   29.067999999999998     116.27199999999999
x        1.466                   7.864000000000014
x2      30.534                 124.13600000000001
y        1.466                   7.864000000000014
y2      30.534                 124.13600000000001

svg / raphael：缩放路径+获得结果/计算路径

3 个答案: