Debugging 是否有在线工具来测试SVG路径？_Debugging_Svg

Debugging 是否有在线工具来测试SVG路径？

debugging svg

Debugging 是否有在线工具来测试SVG路径？,debugging,svg,Debugging,Svg,我正在构建一个使用的应用程序，我希望能够看到渲染的路径。是否有一个站点，比如说，您可以将其粘贴到SVG路径中，对其进行验证，并查看其渲染效果编辑：通过选择Raphael.js、svg.js等作为框架，我发现jsiddle在这方面工作得相当好。e、 g 这对于我的需要来说可能已经足够好了，但是如果知道是否有其他工具可以帮助测试和调试SVG路径的编辑，那就太好了。编辑：在我发布这篇文章之前，由于某种原因，您的更新没有显示出来将SVG路径粘贴到具有.SVG名称的文本文件中，并在浏览器中打开它。或

我正在构建一个使用的应用程序，我希望能够看到渲染的路径。是否有一个站点，比如说，您可以将其粘贴到SVG路径中，对其进行验证，并查看其渲染效果

编辑：通过选择Raphael.js、svg.js等作为框架，我发现jsiddle在这方面工作得相当好。e、 g

这对于我的需要来说可能已经足够好了，但是如果知道是否有其他工具可以帮助测试和调试SVG路径的编辑，那就太好了。

编辑：在我发布这篇文章之前，由于某种原因，您的更新没有显示出来

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


我的SVG测试页面
我的SVG测试

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

如果您只想在浏览器中快速试用一些SVG，而不想在保存和加载文件时乱来，JSFIDLE是一个很好的选择

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

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

我创建了一个

JSFIDLE还支持D3、PaperJs和Raphael等框架，这些框架位于左侧的下拉列表中。

有几个地方可以进行实时测试和调整：

不再维护。

您可以使用“我的助手”网页

我已经为这个主题创建了一个网站：在那里，您可以通过SVG路径并使用它。

我发现能够看到所有的控制点等非常有帮助！：-）

只需在浏览器中打开.SVG即可。或者我遗漏了什么？不是.svg文件，不是svg路径。例如：尽管这是一种方法，谢谢。为什么不将路径放在SVG

元素中，然后在浏览器或您选择的SVG查看器中查看它呢？请小心，Webkit和Opera 12都会接受根据SVG规范无效的路径。尽管它是不允许的，我必须说这正是我想要的。非常感谢你！请描述帮助者网页如何帮助提问者。谢谢。一个改进：当图标较大时，它不适合可用空间。遗憾的是，至少在Firefox上出现了JS错误。虽然示例显示了要通过鼠标编辑的路径的路径指南，但粘贴路径代码后，它显示良好，但没有任何指南。我对这个工具的预期用途有点困惑。问题错误？想要走复杂的道路？嗨，基桑基，谢谢你的反馈。我知道工具在FF上不起作用。正如我在“帮助”中所说的，它是为个人使用而制作的，但它是为了好玩而发布的。：-）铬在这种情况下效果最好。如果我有时间，我会在FF上工作。这个工具非常适合我！小问题我注意到它在解析坐标时有困难，除非两对之间有逗号。感谢您抽出时间来撰写和分享这篇文章！网站关闭了

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