将 SVG 路径数据导入 Raphael.js答案

【问题标题】：Import SVG Path Data into Raphael.js将 SVG 路径数据导入 Raphael.js
【发布时间】：2013-07-09 15:24:05
【问题描述】：

我在搞乱Raphael.js 并想将一些SVG 导入Raphael Objects。我检查了来自https://twitter.com/RaphaelJS 的一些推特帖子，他说您可以复制和粘贴路径点并使用它们。不幸的是，我无法让它工作。

我只想做这个简单的 svg：

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve">
<polyline fill="#CBBBA0" stroke="#000000" stroke-miterlimit="10" points="272.343,345.194 307.418,535.492 349.955,342.955 "/>
<circle fill="#E30613" stroke="#000000" stroke-miterlimit="10" cx="277.194" cy="282.881" r="62.313"/>
</svg>

进入拉斐尔对象。也许你有一些想法如何解决这个问题。

我认为可能是这样的：

var paper = Raphael(10, 50, 320, 200);
paper.path(["272.343,345.194 307.418,535.492 349.955,342.955"])

真糟糕！没用

谢谢

【问题讨论】：

标签： html raphael

【解决方案1】：

这是因为您正在查看多边形/折线，而不是路径。

将polyline points 转换为path d（定义）using something like in this。然后你会得到一个 Raphael 能理解的路径字符串。

您可以发现路径定义而不是多边形或折线定义，因为path strings always start with M。

为方便起见，这里是上面链接问题的代码的 JSBIN 演示，您可以在其中复制和粘贴并转换任何 SVG 多边形或折线：

http://jsbin.com/avuzas/1/edit

【讨论】：

非常好的解决方法。谢谢你，但随后又出现了一个问题。圆圈或椭圆是否有类似的东西，还是我必须手工制作？例如。使用attr() 并用圆圈值等填充它？
有一些工具可以自动将 SVG 转换为 Raphael，我在很久以前的一个问题的答案中写了一些......这里是，stackoverflow.com/questions/10452247/…