このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
<stop>
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
<stop> は SVG の要素で、グラデーションで使用する色とその位置を定義します。この要素は常に <linearGradient> または <radialGradient> 要素の子です。
例
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>
[フレーム]
属性
offset-
この属性は、グラデーションベクトルに沿って配置される色経由点の位置を定義します。 値の型: <number> | <percentage>; 既定値:
0; アニメーション: 可 stop-color-
この属性は、グラデーションの色経由点の色を定義します。 CSS プロパティとして使用することができます。 値の型: <color>; 既定値:
black; アニメーション: 可 stop-opacity-
この属性はグラデーションの色経由点の (不) 透明度を表します。 CSS プロパティとして使用することができます。 値の型: <opacity-value>; 既定値:
1; アニメーション: 可
使用コンテキスト
仕様書
| 仕様書 |
|---|
| Scalable Vector Graphics (SVG) 2 # StopElement |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。