5 LOG

SVGをjQueryで操作する際にハマったので、書き留めておく。

image

SVGファイルををobjectタグで読み込んで、jQueryで操作しようとしたら、取得出来なくてハマった。

まずは、SVGデータをIllustratorで用意。
その際に、レイヤーグループに名前を付けておくと、<g id=”レイヤーグループ名”>で囲んでくれるので便利。

map

SVGファイルをobjectで読み込む。

<object id="svg_map" data="map.svg" type="image/svg+xml"></object>

インラインSVGの場合、

var $svg_map = $('#svg_map');
で取得可能だが、 objectで読み込んだ場合は、取得出来ない。
iframeと同じようにしてもダメ。
var $svg_map = $('#svg_map').contents();
// ダメ

なので、jQueryは使わずに、

var svg_map = document.getElementById('svg_map').contentDocument;
// 取得成功
で取得。

やはりjQueryオブジェクトにした方がいろいろと捗るので、

var $svg_map = $(svg_map);
として、無事にjQueryオブジェクトへ。
となれば、
var $tokyo = $('#tokyo', $map),
$tochigi = $('#tochigi', $map);

$tokyo.find('path').attr('fill', '#f0ba32');

$tochigi.find('path').css({
'stroke': '#208DC3',
    'stroke-with': 5,
    'fill': '#6EB7DB'
});
の様に操作可能。

ただし、addClass でクラス名を付けるのは出来ない。

$tokyo.find('path').addClass('move');
// ダメ
クラス名は
$tokyo.find('path')[0].setAttribute('class', 'styleA');
ただし、objectで読み込んだ場合、外部のdocumentなのでcssファイルにスタイルを書いても反映されないので、あまり意味が無い。
ちなみに、インラインSVGでも addClass は使えないので、setAttribute を使う。インラインSVGの場合は、cssに書かれたスタイルは反映される。

サンプルはこちら