ニュースリリース
コードで描くSVG　JavaScript編

2019.10.20

コードで描くSVG　JavaScript編

24,111

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

要素の取得・指定

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

document.getElementById("id名")//id名で取得
.setAttribute("属性","属性値")//属性を指定
.style.属性="属性値"//属性を指定 ※属性はキャメル形式で記述

document.getElementById("id名")//id名で取得

.setAttribute("属性","属性値")//属性を指定

.style.属性="属性値"//属性を指定 ※属性はキャメル形式で記述

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

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

属性（書式）の取得・指定

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

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

.getAttribute("属性")//属性を取得
.parseInt("進数の基準に基づく数値", 進数の基準)//文字列を数値に変換

1 2	.getAttribute("属性")//属性を取得 .parseInt("進数の基準に基づく数値", 進数の基準)//文字列を数値に変換

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

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

要素を生成する

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

document.createElementNS("http://www.w3.org/2000/svg", "生成したい要素")//要素を生成
.setAttributteNS(null,"属性","属性値")//生成した要素に属性を指定
.appendChild(変数)//生成した要素を親要素に追加
.insertBefore(変数,追加したい要素);//

document.createElementNS("http://www.w3.org/2000/svg", "生成したい要素")//要素を生成

.setAttributteNS(null,"属性","属性値")//生成した要素に属性を指定

.appendChild(変数)//生成した要素を親要素に追加

.insertBefore(変数,追加したい要素);//

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.

イベント処理

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

.addEventListener("イベント", 関数, false/true)//イベントに応じて関数を呼び出す

1	.addEventListener("イベント", 関数, false/true)//イベントに応じて関数を呼び出す

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

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

アニメーション

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

.setInterval(処理, 一定時間)　//一定時間ごとに処理を繰り返す
.clearInterval(処理)//.setIntervalで設定された処理をキャンセルする

1 2	.setInterval(処理, 一定時間)　//一定時間ごとに処理を繰り返す .clearInterval(処理)//.setIntervalで設定された処理をキャンセルする

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

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

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

外部SVGの操作

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

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="290" height="160">
  <rect id="square" width="140" height="140" x="75" y="10" fill="#EEA8B2" stroke="#AB97B0" stroke-width="5" />
</svg>

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns:xlink="http://www.w3.org/1999/xlink"

width="290" height="160">

</svg>

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

<object id="svgImg" data="https://tiltilmitil.co.jp/tiltil/wp-content/themes/tiltilmitil/img/blog/demo/tilblog_js.svg" 
　　　　 type="image/svg+xml"
        width="290" height="160"
        style="border:solid 1px silver"
        onload="svgLoading()">
</object>
<p>正方形(外部SVG)をクリックしてみてください</p>
<script>
  function svgLoading(){
    var svgDoc = document.getElementById('svgImg').getSVGDocument();
    var externalSvg = svgDoc.getElementById("square");
    externalSvg.addEventListener("click", function(){
     externalSvg.setAttribute("fill", "#AB97B0");
     externalSvg.setAttribute("stroke", "#EEA8B2");
    },true);
  }
</script>

　　　　 type="image/svg+xml"

width="290" height="160"

style="border:solid 1px silver"

onload="svgLoading()">

</object>

<p>正方形(外部SVG)をクリックしてみてください</p>

function svgLoading(){

var svgDoc = document.getElementById('svgImg').getSVGDocument();

var externalSvg = svgDoc.getElementById("square");

externalSvg.addEventListener("click", function(){

externalSvg.setAttribute("fill", "#AB97B0");

externalSvg.setAttribute("stroke", "#EEA8B2");

},true);

}

</script>

❶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ファーストガイド

kajihara

Kindleとお風呂で３時間トリップ。主にコードを書いています。