有没有可用于测试SVG路径的在线工具？

Question

我正在构建一个使用SVG路径的应用程序,我希望能够看到我的路径呈现.是否有一个网站,比如像JSFiddle这样的东西,您可以在其中粘贴SVG路径,验证它,并看到它呈现？

编辑:通过选择Raphael.js,svg.js等作为框架,我发现JSFiddle工作得相当好.例如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>

我从这里创建了一个样本.

jsFiddle也从左侧的下拉列表中支持D3,PaperJs和Raphael等框架.

Answer 2

一些地方可以测试和调整现场:

• http://vectorpaint.yaks.co.nz/
• https://petercollingridge.appspot.com/svg-editor/
• http://editor.method.ac/
• https://github.com/SVG-Edit/svgedit

http://scriptdraw.com已不再维护.

Answer 3

您可以使用我的帮助程序网页 http://naiksoftware.github.io/svg.html

Answer 4

我已经为此目的创建了一个站点：http ://svghelper.com/ 在那里，您可以经过SVG路径并使用它。我发现能够看到所有控制点等信息非常有帮助！:-)