mdn · mfuji09 · Aug 10, 2024 · Aug 6, 2024 · Aug 7, 2024 · Aug 7, 2024
@@ -1,9 +1,12 @@
 ---
 title: SVG 要素リファレンス
+short-title: 要素
 slug: Web/SVG/Element
+l10n:
+  sourceCommit: 2e5fc06de139c56873a20ec4bc3bf5600ea3cbef
 ---
 
-« [SVG](/ja/docs/SVG) / [SVG 属性リファレンス](/ja/docs/SVG/Attribute) »
+{{SVGRef}}
 
 SVG の描画と画像は、構築、描画、ベクター画像や図のレイアウトのための広範にわたる要素を使用して作成されます。ここではそれぞれの SVG 要素のリファレンス文書が見つかります。
 
@@ -20,13 +23,11 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 - {{SVGElement("circle")}}
 - {{SVGElement("clipPath")}}
-- {{SVGElement("color-profile")}}
 
 ### D
 
 - {{SVGElement("defs")}}
 - {{SVGElement("desc")}}
-- {{SVGElement("discard")}}
 
 ### E
 
@@ -66,11 +67,6 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 - {{SVGElement("g")}}
 
-### H
-
-- {{SVGElement("hatch")}}
-- {{SVGElement("hatchpath")}}
-
 ### I
 
 - {{SVGElement("image")}}
@@ -84,10 +80,6 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 - {{SVGElement("marker")}}
 - {{SVGElement("mask")}}
-- {{SVGElement("mesh")}}
-- {{SVGElement("meshgradient")}}
-- {{SVGElement("meshpatch")}}
-- {{SVGElement("meshrow")}}
 - {{SVGElement("metadata")}}
 - {{SVGElement("mpath")}}
 
@@ -107,7 +99,6 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 - {{SVGElement("script")}}
 - {{SVGElement("set")}}
-- {{SVGElement("solidcolor")}}
 - {{SVGElement("stop")}}
 - {{SVGElement("style")}}
 - {{SVGElement("svg")}}
@@ -123,96 +114,95 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 ### U
 
-- {{SVGElement("unknown")}}
 - {{SVGElement("use")}}
 
 ### V
 
 - {{SVGElement("view")}}
 
+> **メモ:** [SVG 2 仕様では](https://www.w3.org/TR/SVG2/struct.html#UnknownElement)、レンダリングのために未知の要素は {{SVGElement("g")}} として扱われることが要求されています。
+
 ## SVG 要素一覧 (カテゴリー別)
 
 ### アニメーション要素
 
-{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}
+{{SVGElement("animate")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}
 
 ### 基本シェイプ
 
 {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}
 
 ### コンテナー要素
 
-{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}
+{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}
 
 ### 説明的要素
 
 {{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}
 
 ### フィルター構成要素
 
-{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}
+{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}}, {{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}}, {{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}
 
 ### フォント要素
 
 {{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}
 
 ### グラデーション要素
 
-{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}
+{{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}
 
 ### グラフィック要素
 
-{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}
+{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}
 
 ### グラフィック参照要素
 
-{{SVGElement("mesh")}}, {{SVGElement("use")}}
+{{SVGElement("use")}}
 
 ### 光源要素
 
 {{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}
 
 ### 描画されない要素
 
-{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}
+{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}
 
 ### ペイントサーバー要素
 
-{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}
+{{SVGElement("linearGradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}
 
 ### 描画可能要素
 
-{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}
+{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("use")}}
+
+> **メモ:** [SVG 2 仕様では](https://www.w3.org/TR/SVG2/struct.html#UnknownElement)、レンダリングのために未知の要素は {{SVGElement("g")}} として扱われることが要求されています。
 
 ### 図形要素
 
-{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}
+{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}
 
 ### 構造的要素
 
 {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}
 
 ### テキストコンテンツ要素
 
-{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}
+{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}
 
 ### テキストコンテンツの子要素
 
-{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}
+{{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}
 
 ### 未分類の要素
 
-{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}
+{{SVGElement("clipPath")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}
 
 ## 廃止および非推奨の要素
 
 > [!WARNING]
 > 以下のものは非推奨の古い SVG 要素であり、使用するべきではありません。**新しいプロジェクトでは決して使用せず、古いプロジェクトでもできるだけ早く置き換えてください。**ここに掲載しているのは情報提供だけの目的です。
 
-### A
-
-{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}
-
 ### C
 
 {{SVGElement("cursor")}}
@@ -245,6 +235,6 @@ SVG の描画と画像は、構築、描画、ベクター画像や図のレイ
 
 - [SVG 属性リファレンス](/ja/docs/Web/SVG/Attribute)
 - [SVG チュートリアル](/ja/docs/Web/SVG/Tutorial)
-- [SVG インターフェイスリファレンス](/ja/docs/Web/API/Document_Object_Model#SVG_interfaces)
+- [SVG インターフェイスリファレンス](/ja/docs/Web/API/Document_Object_Model#svg_dom)
 
 {{SVGRef}}
@@ -1,78 +1,83 @@
 ---
 title: <script>
 slug: Web/SVG/Element/script
+l10n:
+  sourceCommit: 2e5fc06de139c56873a20ec4bc3bf5600ea3cbef
 ---
 
-SVG `script` 要素は、HTML の [`script`](/ja/HTML/Element/Script) 要素と同じく、 スクリプト（例えば ECMAScript）を設置するための場所です。
-
-すべての `script` 要素内で定義されたすべての関数は、現在のドキュメント全体でグローバルスコープを持っています。
+{{SVGRef}}
 
-## 利用可能な場所
+SVG の `script` 要素により、スクリプトを SVG 文書に追加することができます。
 
-{{svginfo}}
+> [!NOTE]
+> SVG の `script` 要素は HTML の {{HTMLElement('script')}} 要素と同等ですが、[`src`](/ja/docs/Web/HTML/Element/script#src) の代わりに {{SVGAttr('href')}} 属性を使用したり、ECMAScript モジュールには今のところ対応していないなど、いくつかの相違点があります（詳細は下記のブラウザーの互換性を参照してください）。
 
 ## 例
 
-次のコードスニペットは、SVG の `script` タグの使用方法を示します。このコードでは、SVG {{SVGElement("circle")}} 要素の半径を変更するために JavaScript を使用します。
-
 ```html
+円をクリックすると色が変わります。
 <svg
-  width="100%"
-  height="100%"
-  viewBox="0 0 100 100"
+  viewBox="0 0 10 10"
+  height="120px"
+  width="120px"
   xmlns="http://www.w3.org/2000/svg">
-  <script type="text/javascript">
+  <circle cx="5" cy="5" r="4" />
+
+  <script>
     // <![CDATA[
-    function change(evt) {
-      var target = evt.target;
-      var radius = target.getAttribute("r");
+    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");
 
-      if (radius == 15) {
-        radius = 45;
-      } else {
-        radius = 15;
-      }
+      const B = Math.round(Math.random() * 255)
+        .toString(16)
+        .padStart(2, "0");
 
-      target.setAttribute("r", radius);
+      return `#${R}${G}${B}`;
     }
+
+    document.querySelector("circle").addEventListener("click", (e) => {
+      e.target.style.fill = getColor();
+    });
     // ]]>
   </script>
-
-  <circle cx="50" cy="50" r="45" fill="green" onclick="change(evt)" />
 </svg>
 ```
 
-結果:
-
-{{EmbedLiveSample("Example",150,165)}}
+{{EmbedLiveSample('Example', 150, '100%')}}
 
 ## 属性
 
-### グローバル属性
-
-- [コア属性](/ja/SVG/Attribute#Core) »
-- [Xlink 属性](/ja/SVG/Attribute#XLink) »
-- {{SVGAttr("externalResourcesRequired")}}
-
-### 専用属性
-
+- [`crossorigin`](/ja/docs/Web/HTML/Element/script#crossorigin)
+  - : この属性は、[CORS 設定](/ja/docs/Web/HTML/Attributes/crossorigin) を HTML の {{HTMLElement('script')}} 要素のように定義します。
+    _値の型_: [**\<string>**](/ja/docs/Web/CSS/string); _既定値_: `?`; _アニメーション_: **可**
+- {{SVGAttr("href")}}
+  - : 読み込むスクリプトの {{Glossary("URL")}} です。
+    _値の型_: **[\<URL>](/ja/docs/Web/SVG/Content_type#url)** ; _既定値_: _none_; _アニメーション_: **不可**
 - {{SVGAttr("type")}}
-- {{SVGAttr("xlink:href")}}
+  - : この属性は使用するスクリプト言語の型を定義します。
+    _値の型_: [**\<string>**](/ja/docs/Web/CSS/string); _既定値_: `application/ecmascript`; _アニメーション_: **不可**
+- {{SVGAttr("xlink:href")}} {{deprecated_inline}}
+  - : 読み込むスクリプトの {{Glossary("URL")}} です。
+    _値の型_: **[\<URL>](/ja/docs/Web/SVG/Content_type#url)** ; _既定値_: _none_; _アニメーション_: **不可**
 
-## DOM インターフェイス
+## 使用可能な場所
 
-この要素は [`SVGScriptElement`](/ja/DOM/SVGScriptElement) インターフェイスを実装します。
+{{svginfo}}
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザー互換性
+## ブラウザーの互換性
 
 {{Compat}}
 
 ## 関連情報
 
-- HTML の [`script` 要素](/ja/HTML/Element/Script)
-
-{{SVGRef}}
+- [HTML の `script` 要素](/ja/docs/Web/HTML/Element/script)
@@ -1,48 +1,69 @@
 ---
-title: set
+title: <set>
 slug: Web/SVG/Element/set
+l10n:
+  sourceCommit: 2e5fc06de139c56873a20ec4bc3bf5600ea3cbef
 ---
 
 {{SVGRef}}
 
-## 概要
+SVG の **`<set>`** 要素は、指定した時間だけ属性の値を設定するという単純な意味を提供します。
 
-`set` 要素は指定された時間の間の属性の値を設定します。この要素はすべての属性タイプをサポートしており、合理的に補間することができないものも含みます。例えば、文字列や論理型といった値です。`set` 要素は非加算的要素です。additive 属性と accumulate 属性は許可されておらず、指定されても無視されます。
+文字列や論理値など、合理的に補間できないものも含めて、すべての属性型に対応しています。合理的に補間できる属性については、通常は {{SVGElement('animate')}} を推奨します。
 
-## 使用可能な場所
-
-{{svginfo}}
+> **メモ:**
+> `<set>` 要素は非加算です。{{SVGAttr('additive')}} と {{SVGAttr('accumulate')}} 属性は指定することができず、指定されても無視されます。
 
 ## 例
 
-## 属性
-
-### グローバル属性
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
+
+```html
+<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    rect {
+      cursor: pointer;
+    }
+    .round {
+      rx: 5px;
+      fill: green;
+    }
+  </style>
+
+  <rect id="me" width="10" height="10">
+    <set attributeName="class" to="round" begin="me.click" dur="2s" />
+  </rect>
+</svg>
+```
+
+{{EmbedLiveSample('Example', 150, '100%')}}
 
-- [条件処理属性](/ja/Web/SVG/Attribute#ConditionalProcessing) »
-- [コア属性](/ja/Web/SVG/Attribute#Core) »
-- [アニメーションイベント属性](/ja/Web/SVG/Attribute#AnimationEvent) »
-- [Xlink 属性](/ja/Web/SVG/Attribute#XLink) »
-- [Animation attribute target attributes](/ja/Web/SVG/Attribute#AnimationAttributeTarget) »
-- [アニメーションタイミング属性](/ja/Web/SVG/Attribute#AnimationTiming) »
-- {{ SVGAttr("externalResourcesRequired") }}
-
-### 専用属性
+## 属性
 
-- {{ SVGAttr("to") }}
+- {{SVGAttr("to")}}
+  - : この属性は、アニメーションの再生時間の間、対象とする属性に適用する値を定義します。値は、対象とする属性の要求と一致しなければなりません。
+    _値の型_: [**\<anything>**](/ja/docs/Web/SVG/Content_type#anything); _既定値_: none; _アニメーション_: **不可**
 
-## DOM インターフェース
+## 使用可能な場所
 
-この要素は [`SVGSetElement`](/ja/DOM/SVGSetElement) インターフェースを提供します。
+{{svginfo}}
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザー互換性
+## ブラウザーの互換性
 
 {{Compat}}
 
 ## 関連情報
 
-- {{ SVGElement("animate") }}
+- {{SVGAttr("attributeName")}} 属性
+- [アニメーションタイミング属性](/ja/docs/Web/SVG/Attribute#アニメーションタイミング属性): {{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}
+- {{SVGElement("animate")}}