debugging - 有没有在线工具可以测试 SVG 路径？

Question

我正在构建一个使用 SVG paths 的应用程序，并且我希望能够看到渲染的路径。有没有一个网站，比如JSFiddle ，您可以在其中粘贴 SVG 路径，对其进行验证并查看其渲染情况？

编辑:我发现 JSFiddle 通过选择 Raphael.js、svg.js 等作为框架，对此效果相当好。例如http://jsfiddle.net/DFhUF/1393/

var paper = Raphael(0, 0, 300, 500);

paper.path("M75,75 m-50,0 a50,50 0 1,0 100,0 a50,50 0 1,0 -100,0")
.attr({stroke: "#808", opacity: 1, "stroke-width" : 6})

paper.path("M75,225 m-40,-50 h80, a10,10 0 0,1 10,10 v80 a10,10 0 0,1 -10,10 h-80 a10,10 0 0,1 -10,-10 v-80 a10,10 0 0,1 10,-10")
.attr({stroke: "#808", opacity: 1, "stroke-width" : 6})

这可能足以满足我的需求，但很高兴知道是否有其他工具可以帮助测试和调试 SVG 路径的编辑。

Answer 1

如果您只是想在浏览器中快速尝试一些 SVG，而不是忙于保存和加载文件，jsFiddle 是一个不错的选择。

只需使用以下代码作为模板:

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="your path data here"></path>
</svg>

我创建了一个sample to work from here .

jsFiddle 还支持左侧下拉菜单中的 D3、PaperJs 和 Raphael 等框架。