debugging 是否有任何在线工具来测试SVG路径？

yyyllmsg 于 2023-03-30 发布在其他

关注(0)|答案(4)|浏览(148)

我正在构建一个使用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路径的编辑，那就更好了。

debugging

来源：https://stackoverflow.com/questions/17497938/are-there-any-online-tools-to-test-svg-paths

4条答案

按热度按时间

jhkqcmku1#

如果你只是想在浏览器中快速尝试一些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等框架，从左侧的下拉列表中。

赞(0）回复(0）举报 2023-03-30

qyyhg6bp2#

2023年4月更新

近年来景观发生了变化;还有更多的工具可以优化、修改和创建svg的

我最喜欢的工具

https://yqnn.github.io/svg-path-editor/-不可思议的svg编辑器;免费
https://jakearchibald.github.io/svgomg/-惊人的svg优化器;免费
https://figma.com/-svg编辑器和更多;必须注册。

其他野外选项

赞(0）回复(0）举报 2023-03-30

nwlls2ji3#

你可以使用我的助手网页http://naiksoftware.github.io/svg.html

赞(0）回复(0）举报 2023-03-30

kr98yfug4#

编辑：您的更新没有显示出于某种原因之前，我张贴此...
将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位于MySvgTest.svg中

赞(0）回复(0）举报 2023-03-30

我来回答

debugging 是否有任何在线工具来测试SVG路径？

4条答案

2023年4月更新

我最喜欢的工具

其他野外选项

相关问题

热门标签

最新问答