html - .svg ファイルを HTML で表示し、マウスを使用してその上に線を引く最良の方法

Question

HTML で .svg ファイルを表示し、マウスを使用してその上に動的な線を描画する最良の方法を教えてください。

サンプルsvgはこちらSVGファイル

使っ <object id='svgObj' type='image/svg+xml' data='https://dl.dropboxusercontent.com/u/18190667/4.svg'></object> たけど欲しいものが手に入らない

Answer 1

これを試して：

<canvas id="canvas" width="500" height="500">
</canvas>

スタイル:

canvas {
    border: 1px dashed rgb(200, 200, 200);
    background:url(https://dl.dropboxusercontent.com/u/18190667/4.svg);
}

このリンクを参照して、Canvas で線を引く

HTML5キャンバスでマウスを2回クリックして線を引きますか?

Answer 2

次のように表示できます。

<embed src="https://dl.dropboxusercontent.com/u/18190667/4.svg" type="image/svg+xml" />

http://jsfiddle.net/nAHze/