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 轴坐标。默认为 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>

一个 <pattern> 元素定义为 pattern1。
在图案中，定义了一个视区和一个用作图案的路径。
在 rect 元素中，fill 属性中指定了图案的 url，以使用之前创建的图案填充矩形。

输出

在 Chrome 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本也支持 SVG 图像渲染。

打印页面