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%20to%20another%20pattern" >
</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 ，得到以下结果 -
THE END
