インラインで書かれたSVGなら通常通りjQueryで操作可能だったのですが、大量のコードが書かれていた場合などはSVGを外部ファイル化して読み込む方が何かと便利です。 その場合はjQueryの記述方法を少しアレンジする必要があります。 デモページのパンダの白い部分、黒い部分をマウスオーバーしてみてください。 白い部分は白のエリア全体の色が変わり、黒はマウスオーバーした部分のみが変わります。 デモページ 今回はIllustratorでSVGに書きだしたものを使用しています。 以下のように、動作を分けるレイヤーごとにまとめて半角英数でレイヤー名をつけておくと、id名としてSVGファイルに継承されます。 デモではパンダの黒い部分にblack、白い部分にwhiteとつけています。 サンプルSVGファイル SVGに書き出す [ファイル]>[スクリプト]>[ドキュメントをSVGとして保存]を選択すると
![外部ファイルSVGをjQueryで操作する方法|Gimmick log](https://cdn-ak-scissors.b.st-hatena.com/image/square/2f8bdeb3a9ed2f1e26cda5366222f14934fdd844/height=288;version=1;width=512/https%3A%2F%2Fgimmicklog.com%2Fwordpress%2Fwp-content%2Fuploads%2F2015%2F02%2Fsvg-thumb.png)