Svg-patterns
提供：Dev Guides
SVG-パターン
SVGは<pattern>要素を使用してパターンを定義します。 パターンは<pattern>要素を使用して定義され、グラフィック要素をタイル状に塗りつぶすために使用されます。
宣言
以下は、 <pattern> 要素の構文宣言です。 主な属性のみを示しました。
<pattern
patternUnits="units to define x,y, width and height attributes."
patternContentUnits ="units to define co-ordinate system of contents of pattern"
patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
preserveAspectRatio="to preserve width/height ratio of original content"
xlink:href="reference to another pattern" >
</pattern>属性
| Sr.No. | Name & Description |
|---|---|
| 1 | patternUnits − units to define patterns effect region. It specifies the coordinate system for the various length values within the pattern and for the attributes defining the pattern subregion. If patternUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the 'pattern' element is used. If patternUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the 'pattern' element is used. Default is userSpaceOnUse. |
| 2 | patternContentUnits − units to define pattern content region. It specifies the coordinate system for the various length values within the pattern and for the attributes defining the pattern subregion. If patternContentUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the 'pattern' element is used. If patternContentUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the 'pattern' element is used. Default is userSpaceOnUse. |
| 3 | x − x-axis co-ordinate of the pattern bounding box. Defeault is 0. |
| 4 | y − y-axis co-ordinate of the pattern bounding box. Default is 0. |
| 5 | width − width of the pattern bounding box. Default is 0. |
| 6 | height − height of the pattern bounding box. Default is 0. |
| 7 | preserveAspectRatio - to preserve width/height ratio of original content. |
| 8 | xlink:href − used to refer to another pattern. |
例
テストVG
<html>
<title>SVG Pattern</title>
<body>
<h1>Sample SVG Pattern</h1>
<svg width="800" height="800">
<defs>
<pattern id="pattern1" patternUnits="userSpaceOnUse"
x="0" y="0" width="100" height="100"
viewBox="0 0 4 4" >
<path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green"/>
</pattern>
</defs>
<g>
<text x="30" y="50" >Using Pattern (Triangles): </text>
<rect x="100" y="100" width="300" height="300" stroke="green"
stroke-width="3" fill="url(#pattern1)"/>
</g>
</svg>
</body>
</html>- pattern1として定義された1つの<pattern>要素。
- パターンでは、ビューボックスが定義され、パターンとして使用されるパスが定義されます。
- rect要素では、fill属性で、パターンのURLを指定して、以前に作成したパターンで四角形を塗りつぶします。
出力
ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。
