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画像レンダリングをサポートしています。

Svg-patterns

SVG-パターン

宣言

属性

例

出力

目次