<stop>

例

html,
body,
svg {
  height: 100%;
}

<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; アニメーション: 可

使用コンテキスト

仕様書

ブラウザーの互換性