<stop>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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 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;アニメーション:可

使用コンテキスト

カテゴリー	グラデーション要素
許可されている内容	任意の数、任意の順序の以下の要素。 `<animate>`、`<script>`、`<set>`、`<style>`