
インラインで書かれたSVGなら通常通りjQueryで操作可能だったのですが、大量のコードが書かれていた場合などはSVGを外部ファイル化して読み込む方が何かと便利です。
その場合はjQueryの記述方法を少しアレンジする必要があります。
デモページのパンダの白い部分、黒い部分をマウスオーバーしてみてください。
白い部分は白のエリア全体の色が変わり、黒はマウスオーバーした部分のみが変わります。
SVGファイルを用意する
レイヤーに名前をつける

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