【SVG】スクリプトの基礎

スクリプトを書くと何かしらの処理が実行できます。まず、スクリプトの記述とスクリプトを別ファイルにして読み込む方法について書きます。スクリプトからSVGを操作できるようになるのが目標です。

SVGファイル内にスクリプトを記述する

scriptタグの間に処理を記述する。ここでは、コンソールに文字列を出力する処理を記述している。

<svg width="300px" height="300px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <script type="text/javascript">
    console.log("Hello SVG.");
  </script>
  <circle cx="50" cy="50" r="45" fill="green"/>
</svg>

スクリプトファイルの読み込み

スクリプトをJavaScriptファイルに記述し、別ファイルとして読み込む。

<svg width="300px" height="300px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <script type="text/javascript" href="./svg.js"/>
  <circle cx="50" cy="50" r="45" fill="green"/>
</svg>

/* svg.js */
console.log("Hello SVG.");

まとめ

• SVGファイル内にスクリプトを記述する
• スクリプトファイルの読み込み