<linearGradient>

使用コンテキスト

属性

gradientUnits

この属性は、 x1, x2, y1, y2 の各属性の座標系を定義します。 値の型: userSpaceOnUse | objectBoundingBox; デフォルト値: objectBoundingBox; アニメーション: 可

gradientTransform

この属性は、追加の座標変換をグラデーション座標系へ提供します。 値の型: <transform-list>; デフォルト値: 等価変換; アニメーション: 可

href

この属性は、テンプレートとして使用する別の <linearGradient> 要素への参照を定義します。 値の型: <URL>; デフォルト値: none; アニメーション: 可

spreadMethod

この属性は、グラデーションがグラデーションを含む図形の境界の内側で始まったり終わったりする場合の振る舞いを示します。 値の型: pad | reflect | repeat; デフォルト値: pad; アニメーション: 可

x1

この属性は、線形グラデーションが描画されるベクトルグラデーションの開始点の x 座標を定義します。 値の型: <length>; デフォルト値: 0%; アニメーション: 可

x2

この属性は、線形グラデーションが描画されるベクトルグラデーションの終了点の x 座標を定義します。 値の型: <length>; デフォルト値: 100%; アニメーション: 可

xlink:href

テンプレートとして使用する別の <linearGradient> 要素への <IRI> 参照です。 値の型: <IRI>; デフォルト値: none; アニメーション: 可

y1

この属性は、線形グラデーションが描画されるベクトルグラデーションの開始点の y 座標を定義します。 値の型: <length>; デフォルト値: 0%; アニメーション: 可

y2

この属性は、線形グラデーションが描画されるベクトルグラデーションの終了点の y 座標を定義します。 値の型: <length>; デフォルト値: 0%; アニメーション: 可

DOM インターフェイス

この要素は SVGLinearGradientElement インターフェイスを実装しています。

例

基本的な線形グラデーション

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>

角度付き反復グラデーション

この例では、2 つの <rect> 要素のアスペクト比は異なりますが、グラデーションの角度は同じです。

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

<svg
  viewBox="0 0 500 500"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient
      id="grad"
      x1="0"
      y1="0"
      x2="20"
      y2="20"
      spreadMethod="repeat"
      gradientUnits="userSpaceOnUse">
      <stop offset="50%" stop-color="red" />
      <stop offset="50%" stop-color="gold" />
    </linearGradient>
  </defs>
  <rect width="100%" height="25%" fill="url(#grad)" />
  <rect width="100%" height="65%" fill="url(#grad)" y="30%" />
</svg>

仕様書

ブラウザーの互換性