元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【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.");

まとめ