blob: 013de55861463b721710213e6aa3ea650a89b2b7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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}}
|
