<script>

SVG の script 要素により、スクリプトを SVG 文書に追加することができます。

メモ: SVG の script 要素は HTML の <script> 要素と同等ですが、src の代わりに href 属性を使用したり、ECMAScript モジュールには今のところ対応していないなど、いくつかの相違点があります（詳細は下記のブラウザーの互換性を参照してください）。

例

html
円をクリックすると色が変わります。
<svg
  viewBox="0 0 10 10"
  height="120px"
  width="120px"
  xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="4" />

  <script>
    // <![CDATA[
    function getColor() {
      const R = Math.round(Math.random() * 255)
        .toString(16)
        .padStart(2, "0");

      const G = Math.round(Math.random() * 255)
        .toString(16)
        .padStart(2, "0");

      const B = Math.round(Math.random() * 255)
        .toString(16)
        .padStart(2, "0");

      return `#${R}${G}${B}`;
    }

    document.querySelector("circle").addEventListener("click", (e) => {
      e.target.style.fill = getColor();
    });
    // ]]>
  </script>
</svg>

属性

crossorigin

この属性は、CORS 設定 を HTML の <script> 要素のように定義します。 値の型: <string>; 既定値: ?; アニメーション: 可

href

読み込むスクリプトの URL です。 値の型: <URL> ; 既定値: none; アニメーション: 不可

type

この属性は使用するスクリプト言語の型を定義します。 値の型: <string>; 既定値: application/ecmascript; アニメーション: 不可

xlink:href

読み込むスクリプトの URL です。 値の型: <URL> ; 既定値: none; アニメーション: 不可

使用可能な場所

カテゴリー無し
許可されている内容あらゆる要素や文字データ

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# ScriptElement

ブラウザーの互換性

BCD tables only load in the browser

関連情報