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 keepAspectRatio - 保留原始内容的宽度/高度比。
8 xlink:href - 用于引用另一个模式。

例子

测试SVG.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 Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。