是否有任何在線工具來測試SVG路徑？

我正在構建一個使用SVG paths的應用程序，我希望能夠看到我的路徑呈現。有沒有一個網站，如JSFiddle，你可以粘貼到SVG路徑，驗證它，並看到它呈現？是否有任何在線工具來測試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路徑的測試和調試編輯。

來源

2013-07-05 ericsoco

在瀏覽器中只要打開你的.SVG。或者我錯過了什麼？ – andy256

不是.svg文件，SVG路徑。如：https：//developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths，儘管這是一種方法，謝謝。 – ericsoco

爲什麼不把你的路徑放在SVG''元素中，並在瀏覽器或你選擇的SVG查看器中查看？ –

如果您只是想在瀏覽器中快速嘗試一些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從左側的下拉列表中。

來源

2013-11-26 12:14:37

編輯：您的更新並沒有表現出由於某種原因，我貼在這之前...

您的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

來源

2013-07-08 23:41:37 andy256

少數地方來測試和調整現場：

~~http://scriptdraw.com~~不再維持。

來源

2014-03-21 17:44:25 darcher

你可以用我的助手網頁 http://naiksoftware.github.io/svg.html