BLOG
ブログ

チルチルミチルからのお知らせ・日々の出来事・
アウトプットの場所として日々更新しております。
時々地元クリエイターとのコラボブログもやってます!

コードで描くSVG JavaScript編

1

こんにちは、SVGに目覚めた梶原です(*_*)
この記事ではJavaScriptでSVGを操作するための情報をまとめてみました。

SVGの基本についてはこちら
「コードで描くSVG 図形・テキスト編」

要素の取得・指定

SVGの要素を取得するときはdocument.getElementByIdで取得できます。
取得した要素を変数に入れて.setAttribute又は.styleで属性を指定できます。
但し.setAttributeと.styleを混合して書くとうまく動かないことがあるようです。
コードもキレイになりますのでどちらからに統一した方が◎です。

See the Pen SVG get elements by Airi Kajihara (@kajihara) on CodePen.0


document.getElementsByClassNameなど他の要素取得の書き方も試してみましたが、document.getElementByIdのようにすんなりうまくはいかなかったですorz

属性(書式)の取得・指定

属性(書式)は.getAttributeで取得できます。
しかし.getAttributeは文字列で値を取得します。
CodePenの例だと5を文字列として取得して15を足すと”5″+15=515となってしまいます。
そこで.parseIntを使って文字列を数値に変換します。
私達が日常で使っている10進数(0~9の数値)を基準に指定しています。

.getAttributeについてはこちら
.parseIntについてはこちら

See the Pen SVG get format by Airi Kajihara (@kajihara) on CodePen.0


変数lineWidthに取得した線の太さの値を入れ15を足し、.setAttributeでそれを指定しています。

要素を生成する

JavascriptでSVGの要素を動的に生成することができます。
今回は円をJavascriptのみで作成しました。

document.createElementNSを使い要素を作ります。
「http://www.w3.org/2000/svg」はSVG要素を作るときの決まり文句のようです。
続けて生成したい要素を指定します。
生成した要素の属性を指定する場合は.setAttributteNSを使います。
SVGの属性は指定する場合の名前空間(?)は「null」でOKです。
私には理解できませんでしたが詳細はこちら▶︎名前空間の速修講座
最後に.appendChildで、どの要素の中に生成したSVG要素を追加するかを指定します。
.insertBeforeを使うと指定した要素の後ろにSVGを追加することもできます。

See the Pen SVG generate by javascript by Airi Kajihara (@kajihara) on CodePen.0

イベント処理

クリックやスクロールなどのイベント処理とSVGを組み合わせるときは.addEventListenerを使います。
trueとfalseの指定はイベントが伝わる順番の違いです。
false…子要素→先祖要素
true…先祖要素→子要素
シンプルなイベントの場合はfalseで良いと思われます。

See the Pen SVG event processing by javascript by Airi Kajihara (@kajihara) on CodePen.0


正方形をクリックするとイベントが発生します。

アニメーション

アニメーションも属性値をJavascriptで変化させることで表現することができます。

変数rectXにx座標の10を入れておきます。
setIntervalの中でrectXのx座標を++で1ずつ増やしていきます。
この処理を5/1000秒間隔で繰り返すことにより、正方形が移動し続けます。
c1x(x座標)の値が210よりも大きくなったら、clearIntervalでanimationが停止されます。

See the Pen SVG event processing by javascript by Airi Kajihara (@kajihara) on CodePen.0


正方形をクリックするとアニメーションがスタートします。

外部SVGの操作

外部のSVGを読み込んでJavascriptで操作することもできます。
※ブラウザによってはローカル環境で動かないみたいなのでWEBサーバーにアップロードしておきましょう。
(FireFoxでは動きました!)
codepen(無料アカウント)ではうまくいかなかったので今回はデモページで作成しました。
外部SVGをJavascriptで動かすデモ

▲上記内容のSVGファイルをデモページで読み込んで操作しています。

❶object要素でSVGファイルをwebページに配置します。
❷objet要素にonloadイベントを追加し、オリジナル関数svgLoad()を呼び出します。
外部SVGを操作するときは、.getSVGDocumentというメソッドを使ってSVGドキュメントを取得しておく必要があり、.getSVGDocumentは外部SVGファイルの読み込みが完了していないと全く動きません。
そこでonloadなどのイベントでJavaScriptを実行するタイミングを指定しておきます。
❸変数svgDocに外部SVGのドキュメントを取得します。これで外部SVGファイル内にある要素にもアクセスできるようになりました。
❹SVGファイル内の要素をID名で取得します。
❺インライン要素と同様に処理を書いていきます。

私としてはSVGのみならず個々のJavascriptメソッド自体にも注目できた良い機会になりました。
お次はSVGに特化したJavascriptライブラリの世界に入ります\( ˆoˆ )/
<参考>
Webで使えるSVGファーストガイド

ヨカね!

この記事が面白かったらポチッってください!

Contact