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="属性値がデフォルトとして使用されて子が継承される別のパターンを参照します。再帰的"


<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/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>


Related