<script>

SVG script 要素は、HTML の script 要素と同じでなので、 スクリプト(例えば ECMAScript)を設置するための場所です。

すべての script 要素内で定義されたすべての関数は、現在のドキュメント全体でグローバルスコープを持っています。

利用可能な場所

カテゴリー無し
許可された内容いくつかの要素や文字データ

次のコードスニペットは、SVG の script タグの使用方法を示します。このコードでは、SVG <circle> 要素の半径を変更するために JavaScript を使用します。

<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">
  <script type="text/javascript">
    // <![CDATA[
    function change(evt) {
      var target = evt.target;
      var radius = target.getAttribute("r");

      if (radius == 15) {
        radius = 45;
      } else {
        radius = 15;
      }

      target.setAttribute("r",radius);
   }
   // ]]>
  </script>

  <circle cx="50" cy="50" r="45" fill="green"
          onclick="change(evt)" />
</svg>

結果:

属性

グローバル属性

専用属性

DOM インターフェイス

この要素は SVGScriptElement インターフェイスを実装します。

仕様

仕様 状態 コメント
Scalable Vector Graphics (SVG) 2
<script> の定義
勧告候補
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<script> の定義
勧告 初期の定義

ブラウザー互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
scriptChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1.5IE 完全対応 9Opera 完全対応 9Safari 完全対応 3.1WebView Android 完全対応 3Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3.1Samsung Internet Android ?
typeChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:hrefChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報