jQueryで埋め込まれたSVGを操作する方法。

2015.07.20 / Labs

ベクターベースのSVG画像は、ディプレイの高解像度化が進む中、今後より重要になっていきそうです。
SVG画像自体はイラストレータなどベクターグラフィックのソフトで作成し書き出すこともでき、また単純な図形であれば、XMLにより直接記述することも可能です。

SVG画像の強みとしては、JavaScriptで操作することもできるため、画像内のパーツに対して個別にアニメーションを加えることも可能です。
JavaScriptで操作の際に、HTMLに直接SVGを記述するインライン形式では簡単にjQueryから操作できますが、objectとして埋め込まれたSVGに対しては、少しだけ工夫が必要です。
サンプルはこちら

下記は「test.svg」という円のみ描かれた単純なSVG画像で、円をマウスオーバーによって透明度を変化するスクリプトです。

$(function() {
	$("#test").on("load", function() { //object読み込み後に実行
		var rect = $("#test").contents(); //objectで埋め込まれたSVGの内容を取得
		var circle = rect.find("#circle"); //SVGの中の円を取得
		circle.on({
			"mouseenter": function() {
				$(this).css({opacity:0.5}); //マウスオーバーで透明度を0.5に
			},
			"mouseleave": function() {
				$(this).css({opacity:1}); //マウスアウトで透明度を1に
			}
		});
	});
});

$(function() {

$("#test").on("load", function() { //object読み込み後に実行

var rect = $("#test").contents(); //objectで埋め込まれたSVGの内容を取得

var circle = rect.find("#circle"); //SVGの中の円を取得

circle.on({

"mouseenter": function() {

$(this).css({opacity:0.5}); //マウスオーバーで透明度を0.5に

"mouseleave": function() {

$(this).css({opacity:1}); //マウスアウトで透明度を1に

}

});

「test.svg」ファイルの中身はこちら

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle id="circle" fill="#333333" cx="50" cy="50" r="50"/>
</svg>

</svg>

注意点としては、objectの内容を読み込んだ後での実行が必要なことと、「.contents()」にてobjectの内容の取得が必要です。