Question

我正在构建一个使用SVG paths的应用程序，我希望能够看到我的路径呈现。是否有一个网站，例如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>

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

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

Answer 2

有几个地方可以测试和调整直播：

~~http://scriptdraw.com~~ 不再维护。

Answer 3

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

Answer 4

我为这个非常的目的创建了一个网站：http://svghelper.com/ 在那里你可以通过一个SVG路径并玩它。我发现能够看到所有控制点等非常有帮助！： - ）

Answer 5

编辑：在我发布此内容之前，您的更新未出于某种原因显示...

将SVG路径粘贴到名为.svg的文本文件中，然后在浏览器中将其打开。或者，创建一个像这样的小页面

<html>
  <head><title>My SVG test page</title></head>
  <body>
    <h1>My SVG test</h1>
    <object id="SVG" type="image/svg+xml" data="MySvgTest.svg" 
      width="1000" height="1500"/>
  </body>
</html>

并在浏览器中打开它（请参阅the Primer）。它假设您的SVG在MySvgTest.svg

中

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

5 个答案: