49

我正在构建一个使用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 路径的编辑。

4

4 回答 4

52

如果您只是想在浏览器中快速尝试一些 SVG，而不是在保存和加载文件时遇到麻烦，那么 jsFiddle 是一个不错的选择。

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

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

我创建了一个示例从这里开始工作。

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

于 2013-11-26T12:14:37.760 回答
20

几个现场测试和调整的地方：

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

于 2014-03-21T17:44:25.780 回答
17

您可以使用我的帮助网页 http://naiksoftware.github.io/svg.html 在此处输入图像描述

于 2015-10-05T12:26:07.423 回答
1

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

将 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>

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

于 2013-07-08T23:41:37.320 回答