SVG - 图案_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 图像渲染。

<< SVG - 滤镜 SVG - 渐变 >>