jQueryで埋め込まれたSVGを操作する方法。
ベクターベースのSVG画像は、ディプレイの高解像度化が進む中、今後より重要になっていきそうです。
SVG画像自体はイラストレータなどベクターグラフィックのソフトで作成し書き出すこともでき、また単純な図形であれば、XMLにより直接記述することも可能です。
SVG画像の強みとしては、JavaScriptで操作することもできるため、画像内のパーツに対して個別にアニメーションを加えることも可能です。
JavaScriptで操作の際に、HTMLに直接SVGを記述するインライン形式では簡単にjQueryから操作できますが、objectとして埋め込まれたSVGに対しては、少しだけ工夫が必要です。
サンプルはこちら
下記は「test.svg」という円のみ描かれた単純なSVG画像で、円をマウスオーバーによって透明度を変化するスクリプトです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(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」ファイルの中身はこちら
|
1 2 3 |
<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> |
注意点としては、objectの内容を読み込んだ後での実行が必要なことと、「.contents()」にてobjectの内容の取得が必要です。