<stop>

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 (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)

利用メモ

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

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# GradientStops

ブラウザーの互換性

BCD tables only load in the browser