<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`	用來定義圖案效果區(qū)域的單位。它為模式內(nèi)的各種長度值以及定義模式子區(qū)域的屬性指定坐標系。如果`patternUnits =“userSpaceOnUse”`，則值表示使用`'pattern'`元素時當前用戶坐標系中的值。如果`patternUnits =“objectBoundingBox”`，則值表示在使用`'pattern'`元素時就地引用元素上的邊界框的分數(shù)或百分比的值。默認是`userSpaceOnUse`。
2	`patternContentUnits`	用來定義模式內(nèi)容區(qū)域的單位。它為模式內(nèi)的各種長度值以及定義模式子區(qū)域的屬性指定坐標系。如果`patternContentUnits =“userSpaceOnUse”`，則值表示使用`'pattern'`元素時當前用戶坐標系中的值。如果`patternContentUnits =“objectBoundingBox”`，則值表示在使用`'pattern'`元素時就地引用元素上的邊界框的分數(shù)或百分比值。默認是`userSpaceOnUse`。
3	`x`	模式邊界框的`x`軸坐標。缺省值是`0`。
4	`y`	模式邊界框的`y`軸坐標。缺省值是`0`。
5	`width`	模式邊界框的寬度。缺省值是`0`。
6	`height`	圖案邊界框的高度。默認是`0`。
7	`preserveAspectRatio`	以保留原始內(nèi)容的寬高比。
8	`xlink:href`	用于指另一種模式。

示例

文件:testSVG.html -

<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>

以下是上面代碼的說明 -

有一個<pattern>元素定義為pattern1。
在模式中，定義了一個視框，并定義了一個將被用作模式的路徑。
在rect元素中，在填充屬性中，指定了模式的url，以使用之前創(chuàng)建的模式填充矩形。

在Chrome瀏覽器中打開文件:textSVG.html ，得到以下結(jié)果 -

SVG &lt;pattern&gt;元素

聲明

示例

SVG <pattern>元素