manipulating svg with jquery

jqueryプラグインのjquery svgを試してみたのでメモ。このプラグインを使えばsvgの表示できるブラウザならどれでもいける(はず)。前述のインラインsvgも大丈夫。 GPL & MIT ライセンス。

1. セットアップ

まず空のdivを用意。

<div id="svg"></div>

ラッパーdivのサイズがsvgのサイズに適用されるのでdivのサイズを先に定義する。

//1000×1000px
$("#svg").width(1000).height(1000);

初期化。div中にsvgタグを作ってくれる。

$("#svg").svg();

SVGWrapperオブジェクトの参照を取得する。このSVGWrapperオブジェクトがsvg操作のルートになる。

var wrapper = $("#svg").svg('get');

あとはこの$svgの関数を実行すればsvgの描画ができる。

2. 四角形の描画

座標(10,20)に縦100、横200、塗り#ff0000、線の色#000000、線の太さ1の四角形を描画する。

var rect = wrapper.rect(10,20,100,200,
{
	fill: "#ff0000",
	stroke: "#000000",
	strokeWidth: 1
});

3. プロパティの操作

rectの座標を(100,100)に、透明度を50%に変更する。

wrapper.change(rect,
{
	x: 100,
	y: 100,
	opacity: 0.5
});

4. アニメーション

jquery.svganim.jsをロードしておけばjqueryのanimateが使えるようになる。アニメーションできるプロパティはここを参照。
3秒かけてrectを座標(200,200)に、透明度100%に変更する。

$(rect).animate(
{
	svgX: 200,
	svgY: 200,
	opacity: 1.0
},3000);

5. 外部svgのロード

svg/mountain.svgをロードして読み込み完了後loadSvgCompleteHandlerを実行する。

wrapper.load('svg/mountain.svg', 
{
	onLoad: loadSvgCompleteHandler
});

6. svgをテキストで取得

rectをテキストで取得。

alert(wrapper.toSVG(rect));

出力は、

<rect x="100" y="100" width="100" height="200" fill="#ff0000" stroke="#000000" stroke-width="1" opacity="0.5" style="opacity: 0.5; "></rect>