SVG <pattern>元素

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軸座標。 缺省值是0

4

y

模式邊界框的y軸座標。 缺省值是0

5

width

模式邊界框的寬度。 缺省值是0

6

height

圖案邊界框的高度。 默認是0

7

preserveAspectRatio

以保留原始內容的寬高比。

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,以使用之前創建的模式填充矩形。

在Chrome瀏覽器中打開文件:textSVG.html ,得到以下結果 -
SVG <pattern>元素