<stop>

Baseline Widely available

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

<stop> は SVG の要素で、グラデーションで使用する色とその位置を定義します。この要素は常に <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 プロパティとして使用することができます。 値の型: <color>; 既定値: black; アニメーション: 可

stop-opacity

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

使用コンテキスト

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

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# StopElement

ブラウザーの互換性