49

SVG パスを使用するアプリケーションを構築しています。レンダリングされたパスを表示できるようにしたいと考えています。SVG パスに貼り付けて検証し、レンダリングすることができるJSFiddleのようなサイトはありますか?

編集: 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 に答える
17

私のヘルパー Web ページ http://naiksoftware.github.io/svg.htmlを使用できます。 ここに画像の説明を入力

于 2015-10-05T12:26:07.423 に答える