外部ファイルSVGをjQueryで操作する方法

svg-thumbインラインで書かれたSVGなら通常通りjQueryで操作可能だったのですが、大量のコードが書かれていた場合などはSVGを外部ファイル化して読み込む方が何かと便利です。
その場合はjQueryの記述方法を少しアレンジする必要があります。

デモページのパンダの白い部分、黒い部分をマウスオーバーしてみてください。
白い部分は白のエリア全体の色が変わり、黒はマウスオーバーした部分のみが変わります。

デモページ

SVGファイルを用意する

レイヤーに名前をつける

今回はIllustratorでSVGに書きだしたものを使用しています。
以下のように、動作を分けるレイヤーごとにまとめて半角英数でレイヤー名をつけておくと、id名としてSVGファイルに継承されます。
デモではパンダの黒い部分にblack、白い部分にwhiteとつけています。
2015-02-25_175412

サンプルSVGファイル

SVGに書き出す

[ファイル]＞[スクリプト]＞[ドキュメントをSVGとして保存]を選択すると書き出されます。(CS5.1の場合)

html・CSSを記述する

html

objectタグに任意のid名をつけ、data属性に書きだしたSVGファイルのパスを指定して読み込みます。

<object id="svg-fig" data="panda.svg" type="image/svg+xml"></object>

CSS

SVGを表示するサイズを指定します。デモのような可変の場合は100%にします。

#svg-fig {
	width: 100%;
	height: 100%;
}

jQueryを記述する

jQuery

ここでキモなのが、5～7行目です。htmlで指定したidがついているSVGの中身を取得出来るようにしています。
パンダの黒い部分はCSSを適用する対象が$(this)なので、マウスオーバーしている部分しか赤くなりません。(11行目)
白い部分は7行目で定義した変数で、#whiteというid内にあるもの全てを対象にしているので、白い部分全体が黄色くなります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
	$(window).load(function () {
		//idにsvg-figがついているSVGファイルを取得
		var fig = document.getElementById('svg-fig').contentDocument,
		$fig = $(fig), //変数figにsvgファイルを格納
		$white = $fig.find('#white path');//パンダの白い部分を変数に格納

		//SVGにある#blackのpathオブジェクトをhoverすると、hoverしたパーツだけ赤くする
		$fig.find('#black path').hover(function () {
			$(this).css({
				'cursor': 'pointer', //マウスポインターを変更
				'fill': '#EC0D50'//hover時の図形の色
		});
		},
		function () {
			$(this).css({
				'fill': '#000' //ポインターが外れた時の図形色
			});
		});

		//SVGにある#wihteのpathオブジェクトをhoverすると、#whiteのグループ全て黄色にする
		$white.hover(function () {
			$white.css({
				'cursor': 'pointer',
				'fill': '#F2E675'
		});
		},
		function () {
			$white.css({
				'fill': '#F2F2F2'
			});
		});

	});
</script>

デモページ

参考にさせていただいたサイト様：5 LOG

RELATED POSTS