このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

<script>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

scriptSVG の要素で、スクリプトを 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> 要素のように定義します。 値の型: [ anonymous | use-credentials ]?; 既定値: ?; アニメーション:

href

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

type

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

xlink:href 非推奨;

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

使用可能な場所

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

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# ScriptElement

ブラウザーの互換性

関連情報