<script>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
script
async
Experimental
defer
Experimental
href
type
type='module'
Experimental
xlink:href
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.

関連情報