サーチ…
パラメーター
パラメータ | 説明 |
---|---|
patternUnits | パターン属性の座標系objectBoundingBox(デフォルト)またはuserSpaceOnUse |
patternContentUnits | パターンの内容の座標系objectBoundingBoxまたはuserSpaceOnUse(デフォルト) |
パターントランスフォーム | パターンの内容に適用する変換 |
バツ | パターンのxオフセット(デフォルトはゼロ) |
y | パターンのyオフセット(デフォルトはゼロ) |
幅 | パターンの幅(必要) |
高さ | パターンの高さ(必須) |
xlink:href | 属性やコンテンツを提供する別のパターンへのリンク |
preserveAspectRatio | パターンのアスペクト比を保存するかどうか |
備考
デフォルトでは、図形の左上隅にパターン単位の中央を設定することによって、パターンがタイル表示されます。
objectBoundingBox単位のパターン例
<svg width="400" height="400">
<defs>
<pattern id="pattern1" width="0.2" height="0.2" patternUnits="objectBoundingBox">
<circle cx="10" cy="10" r="10" fill="#0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
</svg>
patternUnitsとpatternContentUnitsの組み合わせによるパターンカバレッジ
SVGパターンは、等価な図形を塗りつぶすときにCSSの背景画像とは大きく異なる動作をします。これにより、SVGへの新規参入者にとって大きな驚きがもたらされる可能性があります。以下は、patternUnitsとpatternContentUnitsのすべての可能な組み合わせで定義されたパターンの例です。これらの設定が塗りつぶし動作にどのように影響するかを示しています。
<svg width="800px" height="800px">
<defs>
<pattern id="pattern1" x="0" y="0" width="0.2" height="0.2" patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern2" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox">
<circle cx=".1" cy=".1" r="0.1" fill="blue" />
</pattern>
<pattern id="pattern3" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern4" x="0" y="0" width="0.2" height="0.2" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
<circle cx=".1" cy=".1" r="0.1" fill="blue" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
<rect x="150" y="10" width="200" height="150" stroke="black" fill="url(#pattern1)"/>
<text x="10" y="200">patternUnits="objectBoundingBox" (20% of shape)</text>
<text x="10" y="220">patternContentUnits="userSpaceOnUse" (20px circle) </text>
<text x="10" y="240" stroke="blue" stroke-width="1">(Units used by default)</text>
<rect x="10" y="310" width="100" height="100" stroke="black" fill="url(#pattern3)"/>
<rect x="150" y="310" width="200" height="150" stroke="black" fill="url(#pattern3)"/>
<text x="10" y="500">patternUnits="userSpaceOnUse" (10px square box)</text>
<text x="10" y="520">patternContentUnits="userSpaceOnUse" (20px circle) </text>
<rect x="410" y="10" width="100" height="100" stroke="black" fill="url(#pattern2)"/>
<rect x="550" y="10" width="200" height="150" stroke="black" fill="url(#pattern2)"/>
<text x="410" y="200">patternUnits="userSpaceOnUse" (10px square box)</text>
<text x="410" y="220">patternContentUnits="objectBoundingBox"(radius="10%") </text>
<rect x="410" y="310" width="100" height="100" stroke="black" fill="url(#pattern4)"/>
<rect x="550" y="310" width="200" height="150" stroke="black" fill="url(#pattern4)"/>
<text x="410" y="500">patternUnits="objectBoundingBox" (20% of shape)</text>
<text x="410" y="520">patternContentUnits="objectBoundingBox"(radius="10%") </text>
</svg>
patternTransformの例
<svg width="800px" height="800px">
<defs>
<pattern id="pattern1" x="0" y="0" width="0.2" height="0.2" >
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern2" x="0" y="0" width="0.2" height="0.2" patternTransform="scale(1.5)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern3" x="0" y="0" width="0.2" height="0.2" patternTransform="skewX(45)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern4" x="0" y="0" width="0.2" height="0.2" patternTransform="matrix(1.5,-.70,.10,1.1,-30,10)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
<rect x="150" y="10" width="200" height="150" stroke="black" fill="url(#pattern1)"/>
<text x="10" y="200">Original</text>
<rect x="410" y="10" width="100" height="100" stroke="black" fill="url(#pattern2)"/>
<rect x="550" y="10" width="200" height="150" stroke="black" fill="url(#pattern2)"/>
<text x="410" y="200">patternTransform="scale(1.5)"</text>
<rect x="10" y="310" width="100" height="100" stroke="black" fill="url(#pattern3)"/>
<rect x="150" y="310" width="200" height="150" stroke="black" fill="url(#pattern3)"/>
<text x="10" y="500">patternTransform="skewX(45)"</text>
<rect x="410" y="310" width="100" height="100" stroke="black" fill="url(#pattern4)"/>
<rect x="550" y="310" width="200" height="150" stroke="black" fill="url(#pattern4)"/>
<text x="410" y="500">patternUnits="matrix(1.5,-.70,.10,1.1,-30,10)"</text>
</svg>
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow