SVG入门-纹理

图案

---

<patterns>的功能非常强大，在pattern元素内部你可以包含任何之前包含过的其它基本形状，并且每个形状都可以使用之前学习过的任何样式样式化，包括渐变和半透明。用<pattern>定义的图案，可以被用在其他元素的fill或者stroke属性中。

<pattern id="pa">
    <!-- 描绘pattern图案的svg元素 -->
</pattern>
<rect x="0" y="0" height="100" width="100" style="fill:url(#pa); stroke:url(#pa)">

图案的填充方式 patternUnits

---

pattern有两种填充方式：objectBoundingBox和userSpaceOnUse：

objectBoundingBox为patternUnits的默认属性值。可以理解为在指定区域内，规定沿x轴和y轴平铺指定数量的图案。我们通过指定width和height来间接规定图案平铺的数量。因为这时，width和height被限制在0-1，或者0%-100%之间，即宽度或高度占填充区域高度或宽度的百分比。可想而知20%放5个，40%放2.5个。

<svg width="500" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  	<defs>
    	<pattern id="tile" width="0.2" height="0.2" patternUnits="objectBoundingBox">
        	<path d="M 0 0 Q 5 20 10 10 T 20 20" stroke="black" fill="none"></path>
        	<rect x="0" y="0" width="20" height="20" stroke="grey" fill="none"></rect>
    	</pattern>
	</defs>
	<rect x="20" y="20" width="100" height="100" fill="url(#tile)" stroke="grey">	</rect>
	<rect x="140" y="20" width="70" height="80" fill=