2

假设我有这个 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");

最后一行将图像缩放 4 倍，并将整个图像向下和向右移动。

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

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

4

3 回答 3

2

请在此处查看我的答案和此处的测试平台。

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

如果这种扁平化功能是 Raphaël 的一部分，那就太好了。

于 2012-11-03T15:58:58.073 回答
1

路径保持完全一样，所以你不能在这里得到你想要的。

您假设 Raphael 在转换点时循环点并向上缩放坐标。但是，它并没有这样做——而是将转换函数应用于渲染器。

例如，在你.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
于 2012-07-17T18:02:14.603 回答
1

Raphael.transformPath函数似乎是您正在寻找的。

icon = paper.path(Raphael.transformPath("M16,1.466C7.973,...", "s4T50,50")).attr({fill: "#000", stroke: "none"});
于 2012-07-18T14:15:31.430 回答