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

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/SVG:linearGradient要素/lg.svg

code:lg.svg

<svg

viewBox="0 0 10 10"

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

SVG要素.icon