<stop>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

SVG の <stop> 要素は、グラデーションで使用する色と位置を定義します。この要素は常に <linearGradient> または <radialGradient> 要素の子です。

例

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 プロパティとして使用することができます。 値の型: currentcolor|<color>|<icccolor>; 既定値: black; アニメーション: 可

stop-opacity

この属性はグラデーションの色経由点の (不) 透明度を表します。 CSS プロパティとして使用することができます。 値の型: <opacity>; 既定値: 1; アニメーション: 可

使用コンテキスト

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

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# GradientStops

ブラウザーの互換性

BCD tables only load in the browser