jQueryを使った外部SVGファイルの読み込み
HTML5ではSVGをHTML内の要素として書き込むことができますが、
サイトの運用の都合などで、外部ファイルとして存在するSVGを読み込んで操作したい場合も多くあると思います。
外部SVGファイルの読み込み方法はいろいろありますが、jQueryのload()を使うと、簡単に読み込むことができます。
↓こちらがその方法で読み込んでみたもの
方法
方法はとても簡単です。
HTML
|
1 | <script src="æ/jquery-2.1.1.min.js"></script> |
|
1 | <div id="svgArea"></div> |
まず HTMLのhead内でjQueryを読み込み、
HTMLのbody内にSVGを配置するdivに適当なIDを設定して配置します。
jQuery
|
1 2 3 4 5 6 7 | $(function(){ $("#svgArea").load("images/logo.svg svg", function(){ //SVGの処理 }); }); |
次にjQueryで「$(“[SVGを読み込む要素]”).load(“SVGファイルのパス svg”)」を実行すれば読み込み完了です。
さらに読み込んだSVGを操作する場合は、「$(“[SVGを読み込む要素]”).load(“SVGファイルのパス svg”, function(){ … 操作するプログラム … })」
という風にload()でコールバック関数をつけると、操作が可能になります。
SVGでは色の変更など、通常の画像ではできないことができ、
Webフォントを使った方法より運用がしやすいというメリットもあるので、
どんどん活用していきたいです。
Author Profile
SHARE
