SVG:pattern要素

id="このパターンを参照するために使用されるユニークな id"

patternUnits="'userSpaceOnUse' または 'objectBoundingBox'。

2 番目の値は、x、y、width、heightの単位を、パターンを使用する オブジェクトの包含ボックスの端数（または %）にします。"

patternContentUnits="'userSpaceOnUse' または 'objectBoundingBox'"

patternTransform="パターン全体を変換する"

x="左上隅からのパターンのオフセット（差分）。(デフォルトは 0)"

y="左上隅からのパターンのオフセット（差分）。(デフォルトは 0)"

width="パターンタイルの幅 (デフォルトは 100%)"

height="パターンタイルの高さ (デフォルトは 100%)"

viewBox="the points "seen" in this SVG drawing area.

4 つの値は、空白またはカンマで区切ります。 (min x, min y, width, height)"

xlink:href="属性値がデフォルトとして使用されて子が継承される別のパターンを参照します。再帰的"

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

code:p.svg

<defs>

<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">

<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />

</pattern>

</defs>

<circle cx="50" cy="50" r="50" fill="url(#star)" />

<circle

cx="180"

cy="50"

r="40"

fill="none"

stroke-width="20"

stroke="url(#star)" />

</svg>

SVG要素.icon