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