<linearGradient>

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.

<linearGradient> 要素により、他の SVG 要素に適用する線形グラデーションを定義することができます。

例

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

属性

gradientUnits: この属性は、 x1, x2, y1, y2 の各属性の座標系を定義します。 値の型: userSpaceOnUse|objectBoundingBox ; 既定値: objectBoundingBox; アニメーション: 可
gradientTransform: この属性は、追加の座標変換をグラデーション座標系へ提供します。 値の型: <transform-list> ; 既定値: 等価変換; アニメーション: 可
href: この属性は、テンプレートとして使用する別の <linearGradient> 要素への参照を定義します。 値の型: <URL> ; 既定値: none; アニメーション: 可
spreadMethod: この属性は、グラデーションがグラデーションを含む図形の境界の内側で始まったり終わったりする場合の振る舞いを示します。 値の型: pad|reflect|repeat ; 既定値: pad; アニメーション: 可
x1: この属性は、線形グラデーションが描画されるベクトルグラデーションの開始点の x 座標を定義します。 値の型: <length-percentage> | <number>; 既定値: 0%; アニメーション: 可
x2: この属性は、線形グラデーションが描画されるベクトルグラデーションの終了点の x 座標を定義します。 値の型: <length-percentage> | <number>; 既定値: 100%; アニメーション: 可
xlink:href 非推奨: テンプレートとして使用する別の <linearGradient> 要素への <IRI> 参照です。 値の型: <IRI> ; 既定値: none; アニメーション: 可
y1: この属性は、線形グラデーションが描画されるベクトルグラデーションの開始点の y 座標を定義します。 値の型: <length-percentage> | <number>; 既定値: 0%; アニメーション: 可
y2: この属性は、線形グラデーションが描画されるベクトルグラデーションの終了点の y 座標を定義します。 値の型: <length-percentage> | <number>; 既定値: 0%; アニメーション: 可

使用可能な場所

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

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # LinearGradients

ブラウザーの互換性

BCD tables only load in the browser