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>

属性

シニア番号	名前と説明
1	patternUnits−パターン効果領域を定義する単位。これは、パターン内のさまざまな長さの値と、パターンのサブ領域を定義する属性の座標系を指定します。patternUnits = "userSpaceOnUse"の場合、値は、「pattern」要素が使用されたときに配置されている現在のユーザー座標系の値を表します。patternUnits = "objectBoundingBox"の場合、値は、「pattern」要素が使用されたときに配置された参照要素の境界ボックスの分数またはパーセンテージで値を表します。デフォルトはuserSpaceOnUseです。
2	patternContentUnits−パターンコンテンツ領域を定義する単位。これは、パターン内のさまざまな長さの値と、パターンのサブ領域を定義する属性の座標系を指定します。patternContentUnits = "userSpaceOnUse"の場合、値は、「pattern」要素が使用されたときに配置されている現在のユーザー座標系の値を表します。patternContentUnits = "objectBoundingBox"の場合、値は、「pattern」要素が使用されたときに配置された参照要素の境界ボックスの分数またはパーセンテージで値を表します。デフォルトはuserSpaceOnUseです。
3	x−パターン境界ボックスのx軸座標。Defeaultは0です。
4	y−パターン境界ボックスのy軸座標。デフォルトは0です。
5	width−パターン境界ボックスの幅。デフォルトは0です。
6	height−パターン境界ボックスの高さ。デフォルトは0です。
7	preserveAspectRatio -元のコンテンツの幅/高さの比率を維持します。
8	xlink:href −別のパターンを参照するために使用されます。

例

testSVG.htm

<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ウェブブラウザでtextSVG.htmを開きます。Chrome / Firefox / Operaを使用して、プラグインなしでSVG画像を直接表示できます。Internet Explorer 9以降は、SVG画像レンダリングもサポートしています。