<stop>
SVG の <stop>
要素は、グラデーションで使用する色と位置を定義します。この要素は常に <linearGradient>
または <radialGradient>
要素の子です。
例
<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>
属性
offset
-
この属性は、グラデーションベクトルに沿って配置される色停止点の位置を定義します。 値の型: <number>|<percentage>; 既定値:
0
; アニメーション: 可 stop-color
-
この属性は、グラデーションの色停止点の色を定義します。CSS プロパティとして使用することができます。 値の型:
currentcolor
|<color>|<icccolor>; 既定値:black
; アニメーション: 可 stop-opacity (en-US)
-
この属性はグラデーションの色停止点の (不) 透明度を表します。CSS プロパティとして使用することができます。 値の型: <opacity>; 既定値:
1
; アニメーション: 可
グローバル属性
- コア属性
-
最重要のもの:
id
- スタイル付け属性
class (en-US)
,style (en-US)
- イベント属性
- プレゼンテーション属性
-
最重要のもの:
color
,display (en-US)
,stop-color
,stop-opacity (en-US)
,visibility (en-US)
利用メモ
仕様書
Specification |
---|
Scalable Vector Graphics (SVG) 2 # GradientStops |
ブラウザーの互換性
BCD tables only load in the browser