SVG.JSを使ったSVGファイルの読み込みと操作
前回、jQueryを使ってSVGを読み込む方法をご紹介いたしました。
jQueryを使えば、確かにSVGの読み込み自体は簡単になりますが、
読み込んだSVGを操作するとなると、
SVGについての詳細な知識が必要になったり、アニメーションなどで一手間かけなければならなくなります。
以前、SVGを扱いやすくするJavaScriptライブラリとして、SVG.jsをご紹介いたしましたが、
このSVG.jsにはいくつかのプラグインが用意されていて、
テキストで記述したSVGコードをSVG.jsで扱える要素として読み込めるようになるsvg.import.jsというものが用意されています。
この機能を利用すると、jQueryとの合わせ技で、外部ファイルをSVG.jsで自由に扱える要素として読み込むことができますので、
その方法について、ご紹介いたします。
↓こちらがDEMOです。
方法
手順
- jQueryおよびSVG.jsとそのプラグインをダウンロードして読み込む。
- HTMLで、SVGを描画する要素と、外部ファイルの読み込みに使う仮想要素を準備する。
- 外部ファイルを読み込み、読み込んだSVGをテキストに変換して変数に保存する。
- svg.jsでSVG要素を作成し、その中にsvg.import.jsを使ってテキスト化したSVGを要素として読み込む。
1. jQueryおよびSVG.jsとそのプラグインをダウンロードして読み込む
jQueryを公式サイトからダウンロードしてサーバーにアップロードして読み込むか、Google Hosted Librariesから読み込みます。
SVG.jsを公式サイトからダウンロードし、
svg.import.jsをこちらからダウンロードします。
svg.import.jsの利用には、svg.parser.jsの読み込みも必要になりますので、
svg.parser.jsをこちらからダウンロードします。
ダウンロードしてサーバーに配置したら、
以下の順番でHTMLに読み込みます。
|
1 2 3 4 | <script src="js/jquery-2.1.1.min.js"></script> <script src="js/svg.min.js"></script> <script src="js/svg.parser.min.js"></script> <script src="js/svg.import.min.js"></script> |
2.HTMLで、SVGを描画する要素と、外部ファイルの読み込みに使う仮配置用要素を準備する
|
1 2 3 4 5 6 7 | <body> ・・・略・・・ <div id="svgArea"></div> <div id="imaginalSvgArea"></div> ・・・略・・・ </body> </html> |
|
1 2 3 4 5 6 7 8 | #svgArea{ width: 360px; height: 360px; margin: 30px auto 60px; } #imaginalSvgArea{ display: none; } |
SVGを配置したい場所に、任意のIDをつけた要素を配置します。
さらに、外部SVGを読み込むときに使う、仮配置用の display: noneにした要素を任意のIDで配置します。
ここで読み込み用のSVGを配置するのは、SVGを読み込むときに、一時的に配置したSVGが画面上に表示されるのを防ぐためです。
3. 外部ファイルを読み込み、読み込んだSVGをテキストに変換して変数に保存する
ではいよいよ、JavaScriptを記述していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(function(){ $("#imaginalSvgArea").load("images/logo.svg svg", function(){ //外部SVGを仮配置用の要素に読み込む var rawSvg = $("#imaginalSvgArea").html(); //読み込んだSVGを変数に保存 $("#imaginalSvgArea").text(rawSvg); //さらにそれをテキストに変換 rawSvg = $("#imaginalSvgArea").text(); //変換したテキストを変数に保存 $("#imaginalSvgArea").html(""); //仮配置用の要素を元に戻す ・・・ }); }); |
まず仮配置用の要素に、jQueryの. load()を使って、外部のSVGファイルを読み込みます。
そして読み込んだSVGを.html()でHTMLとして一度変数に保存し、
保存したHTMLを仮配置用の要素に、.text()を使ってテキストとして上書きし、
そのテキストを変数に保存します。
変換が終わったら、仮配置用の要素は.html(“”)で空の状態に戻しておきます。
4. svg.jsでSVG要素を作成し、その中にsvg.import.jsを使ってテキスト化したSVGを要素として読み込む
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | $(function(){ $("#imaginalSvgArea").load("images/logo.svg svg", function(){ var rawSvg = $("#imaginalSvgArea").html(); $("#imaginalSvgArea").text(rawSvg); rawSvg = $("#imaginalSvgArea").text(); $("#imaginalSvgArea").html(""); //↓続きここから var draw = SVG('svgArea'), //#svgAreaにSVGを作成 star = draw.svg(rawSvg), //読み込んだSVGデータを#svgAreaに作成したSVG内に記述 tgSvg; //tgSvgの準備 tgSvg = draw.first().first(); //読み込んだSVG直下のグループを選択(Illustatorの１つ目のレイヤー) //↓ここから読み込んだSVG要素の操作 tgSvg.scale(0.5, 0.5); //半分の大きさに縮小 tgSvg.center(180, 180); //中心を基準に座標(x: 180, y: 180)に移動 tgSvg.each(function(){ this.fill({ color: '#ccc', opacity: 0.75 }); //選択したグループ内の各要素の色と透明度を変更 }); ・・・ }); }); |
ここからSVG.jsによる記述で、実際にSVGを描画・操作します。
|
1 2 | var draw = SVG('svgArea'), //#svgAreaにSVGを作成 star = draw.svg(rawSvg); //読み込んだSVGデータを#svgAreaに作成したSVG内に記述 |
「SVG(“SVGを実際に配置する要素のid名”)」でSVGを準備し、
「draw.svg([テキストのSVGコードを保存した変数])」でテキストのSVGコードをSVGの要素として描画します。
これでSVG.jsの要素として、外部のSVGファイルを読み込むことが出来ましたので、
あとはSVG.jsで用意されたプロパティを使って自由に操作ができます。
特にアニメーションさせたいときはSVG.jsが重宝しますので、ぜひご利用ください。
参考サイト
Author Profile
SHARE
