Web/SVG/Element/stop を新規翻訳

- 2021/10/19 時点の英語版に基づき新規翻訳

1 files changed, 72 insertions, 0 deletions

diff --git a/files/ja/web/svg/element/stop/index.md b/files/ja/web/svg/element/stop/index.md
new file mode 100644
index 0000000000..013de55861
--- /dev/null
+++ b/files/ja/web/svg/element/stop/index.md
@@ -0,0 +1,72 @@
+---
+title: <stop>
+slug: Web/SVG/Element/stop
+tags:
+  - 要素
+  - リファレンス
+  - SVG
+  - SVG グラデーション
+browser-compat: svg.elements.stop
+translation_of: Web/SVG/Element/stop
+---
+{{SVGRef}}
+
+SVG の **`<stop>`** 要素は、グラデーションで使用する色と位置を定義します。この要素は常に {{SVGElement("linearGradient")}} または {{SVGElement("radialGradient")}} 要素の子です。
+
+<h2 id="Example">例</h2>
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="myGradient" gradientTransform="rotate(90)">
+      <stop offset="5%"  stop-color="gold" />
+      <stop offset="95%" stop-color="red" />
+    </linearGradient>
+  </defs>
+
+  <!-- using my linear gradient -->
+  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
+</svg>
+```
+
+{{EmbedLiveSample('Example', 150, '100%')}}
+
+## 属性
+
+*   {{SVGAttr("offset")}}
+    *   : この属性は、グラデーションベクトルに沿って配置される色停止点の位置を定義します。
+        *値の型*: [**\<number>**](/ja/docs/Web/SVG/Content_type#number)|[**\<percentage>**](/ja/docs/Web/SVG/Content_type#percentage); *既定値*: `0`; *アニメーション*: **可**
+*   {{SVGAttr("stop-color")}}
+    *   : この属性は、グラデーションの色停止点の色を定義します。CSS プロパティとして使用することができます。
+        *値の型*: `currentcolor`|[**\<color>**](/ja/docs/Web/SVG/Content_type#color)|[**\<icccolor>**](/ja/docs/Web/SVG/Content_type#icccolor); *既定値*: `black`; *アニメーション*: **可**
+*   {{SVGAttr("stop-opacity")}}
+    *   : この属性はグラデーションの色停止点の (不) 透明度を表します。CSS プロパティとして使用することができます。
+        *値の型*: [**\<opacity>**](/ja/docs/Web/SVG/Content_type#opacity_value); *既定値*: `1`; *アニメーション*: **可**
+
+### グローバル属性
+
+*   [コア属性](/ja/docs/Web/SVG/Attribute/Core)
+    *   : 最重要のもの: {{SVGAttr('id')}}
+*   [スタイル付け属性](/ja/docs/Web/SVG/Attribute/Styling)
+    *   : {{SVGAttr('class')}}, {{SVGAttr('style')}}
+*   イベント属性
+    *   : [グローバルイベント属性](/ja/docs/Web/SVG/Attribute/Events#global_event_attributes), [文書要素イベント属性](/ja/docs/Web/SVG/Attribute/Events#document_element_event_attributes)
+*   [プレゼンテーション属性](/ja/docs/Web/SVG/Attribute/Presentation)
+    *   : 最重要のもの: {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('stop-color')}}, {{SVGAttr('stop-opacity')}}, {{SVGAttr('visibility')}}
+
+## 利用メモ
+
+{{svginfo}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}