SVG:linearGradient要素
線形グラデーションを定義する
id="このパターンを参照するために使用するユニークな ID。
参照するために必要"
gradientUnits="'userSpaceOnUse' または 'objectBoundingBox'。
ビューボックスまたはオブジェクトを使用して、ベクトル点の相対位置を決定します。
(デフォルトｈ 'objectBoundingBox')"
gradientTransform="グラデーションに適用する変換"
x1="グラデーション・ベクトルの始点の x 座標。（数値か % - デフォルトは 0%）"
y1="グラデーション・ベクトルの始点の y 座標。（デフォルトは 0%）"
x2="グラデーション・ベクトルの終点の x 座標。（デフォルトは 100%）"
y2="グラデーション・ベクトルの終点の y 座標。（デフォルトは 0%）"
spreadMethod="'pad' か 'reflect' または 'repeat'"
xlink:href="属性値がデフォルトとして使用され、ストップが含まれている別のグラデーションを参照します。再帰的"
SVGLinearGradientElement
lg.svg<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> 