使用 Raphael.js 转换 SVG 路径

【问题标题】：Transforming an SVG path using Raphael.js使用 Raphael.js 转换 SVG 路径
【发布时间】：2013-03-23 14:33:46
【问题描述】：

我是 SVG 和 Raphael.js 的新手，所以虽然我编写的代码按我的预期/希望工作，但我想检查我所做的是否是最佳实践/正确的方法，或者是否有更好的方法方式。

我有一条路径，它基本上是一个非圆（根据品牌）。我通过将 PNG 转换为 SVG（在线）获得了路径。我遇到的问题是，当图像本来是 72x72px 时，在线转换器将其缩放到相当大的大小。

这实际上对我有利，因为我需要使用各种大小的圆圈。

所以我使用.transform() 将其缩小并将其转换为我需要的大小。感觉有点像黑客。有没有更好的办法？或者这是你能做到的最好的？

提前致谢。

【问题讨论】：

【解决方案1】：

使用.transform() 就可以了。 “可缩放矢量图形”的整个想法是它们是可扩展的。由于它们是根据基于坐标的定义在页面上呈现的，因此它们在任何尺寸下都应该看起来一样好。

对我来说，从 png 中导入这个漂亮的几何图形，而不是用更数学的方式来计算定义，这对我来说是一种 hack。我怀疑你真的需要这么大的贝塞尔曲线来制作这么简单的形状。

也就是说，我不知道什么是“外圈”。可能一点都不简单。

【讨论】：

我的问题是“离圈”是客户的品牌。这不是一个圆圈。更像是一个脑袋！
我发现 Inkscape 在这种情况下非常有用。只需导入 PNG 并使用钢笔工具在其上绘制曲线。一旦看起来正确，使用 XML 编辑器中的路径数据。我不确定，但我想你以这种方式绘制的曲线会比从 PNG 生成的曲线要简单，更不用说你可以随意调整它。只是我的两分钱。