svg/拉斐尔 : scale path + get resulting/computed path

标签 svg raphael scaling

假设我有这个 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 文件中使用生成的路径。

所以我的问题是:转换完成后如何获取结果或计算路径

最佳答案

请查看我的回答here和测试台here .

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

如果像拉斐尔这样的扁平化功能是一部分,那就太好了。

关于svg/拉斐尔 : scale path + get resulting/computed path,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11527531/

相关文章:

javascript - 如何获取 tspan 元素的位置和宽度

javascript - 将变换与 raphael 集结合使用

javascript - 变量抛出 'undefined' 错误,无法弄清楚

javascript - 重叠 SVG 元素上的鼠标事件

android - 如果使用可绘制对象引用,可绘制对象不会因缺少密度桶而缩放

architecture - 设计 "item stock alert"架构

jquery - React 中的第三方 DOM 操作

css - 重用许多对象的集合,但现在为每个对象分配一个单独的不透明度,而不复制所有代码?

XML 编写器命名空间

java - 如何删除自动 Axis 标签拉伸(stretch)?