このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
<script>
Baseline
広く利用可能
*
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
* この機能の一部は、対応レベルが異なる場合があります。
<script> は SVG の要素で、スクリプトを SVG 文書に追加することができます。
使用コンテキスト
| カテゴリー | 無し |
|---|---|
| 許可されている内容 | あらゆる要素や文字データ |
属性
crossorigin-
この属性は、CORS 設定 を HTML の
<script>要素と同様に定義します。 値の型: [ anonymous | use-credentials ]?; デフォルト値:?; アニメーション: 可 fetchpriority-
外部スクリプトを取得する際に使用する相対的な優先順位に対するヒントを提供します。 利用可能な値は次の通りです。
hreftype-
この属性は使用するスクリプト言語の型を定義します。 値の型:
<media-type>; デフォルト値:application/ecmascript; アニメーション: 不可 xlink:href
DOM インターフェイス
この要素は、SVGScriptElement インターフェイスを実装しています。
例
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>
[フレーム]
仕様書
| 仕様書 |
|---|
| Scalable Vector Graphics (SVG) 2 # ScriptElement |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。