<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.

script は SVG の要素で、スクリプトを 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; アニメーション: 不可