SVG - 图案
SVG 使用 <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>
属性
| 名称 | 描述 |
|---|---|
| patternUnits | 定义图案效果区域的单位。它指定阵列中各种长度值的坐标系以及定义阵列子面域的属性。如果 patternUnits=“userSpaceOnUse”，则值表示在使用 'pattern' 元素时当前用户坐标系中的值。如果 patternUnits=“objectBoundingBox”，则值表示在使用 'pattern' 元素时引用元素上边界框的分数或百分比值。默认值为 userSpaceOnUse。 |
| patternContentUnits | 定义图案内容区域的单位。它指定阵列中各种长度值的坐标系以及定义阵列子面域的属性。如果 patternContentUnits=“userSpaceOnUse”，则值表示在使用 'pattern' 元素时当前用户坐标系中的值。如果 patternContentUnits=“objectBoundingBox”，则值表示在使用 'pattern' 元素时引用元素上边界框的分数或百分比值。默认值为 userSpaceOnUse。 |
| x | 图案边界框的 x 轴坐标。Defeault 为 0。 |
| y | 图案边界框的 y 轴坐标。默认值为 0。 |
| width | 图案边界框的宽度。默认值为 0。 |
| height | 图案边界框的高度。默认值为 0。 |
| preserveAspectRatio | 保留原始内容的宽度/高度比率。 |
| xlink:href | 用于指代另一种模式。 |
例
testSVG.htm
<html>
<title>SVG Pattern</title>
<body>
<svg width="800" height="400">
<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" >使用图案（三角形）：</text>
<rect x="100" y="100" width="300" height="300" stroke="green"
stroke-width="3" fill="url(#pattern1)" />
</g>
</svg>
</body>
</html>
- 一个 <pattern> 元素定义为 pattern1。
- 在 pattern 中，定义了一个 viewbox 并定义了一个要用作 pattern 的路径。
- 在 rect 元素的 fill 属性中，指定模式的 url 以使用之前创建的模式填充矩形。
在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。