＄(…)でSVGファイルの要素を指定する

SVGファイルはベクトル形式で図形を描画するためのファイルであり、その形式はXMLベースで記述されている。この利点を生かして、SVGファイルの要素をjQueryを使って操作することを思いついた。その方法を忘れないよう記録しておく。

１．SGVファイルの取り込み

  • HTML内にオブジェクト用意し、このオブジェクトにSVGファイルを埋め込む。
<object id="svgImg" data="../img/map2.svg" type="image/svg+xml"
        width="700" height="700"  onload="svgload()"></object>

２．要素の取得

  • オブジェクト要素からSVGファイルのドキュメント要素を得る
  • ドキュメント要素の中から得たい子孫要素をjQueryオブジェクトで得る。
  • jQueryメソッドなどを使ってjQueryオブジェクトを操作する。
<script type="text/javascript">
function svgload(){
  // SVGファイルのドキュメント要素を得る
  var svgDoc = document.querySelector('#svgImg').getSVGDocument();
  // ドキュメント要素の子孫要素（id="path4263")をjQueryオブジェクトで得る
  var root = $(svgDoc).find('#path4263');
  // 得た子孫要素にcssを指定
  root.css('visibility','hidden');
}