<linearGradient>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
<linearGradient> は SVG の要素で、制作者が他の SVG 要素に適用する線形グラデーションを定義することができます。
使用コンテキスト
属性
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 インターフェイスを実装しています。
例
基本的な線形グラデーション
<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> 要素のアスペクト比は異なりますが、グラデーションの角度は同じです。
<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>
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # LinearGradientElement |