SVG Pattern

svg有两种填充方式：pattern和gradient。

pattern可以实现以指定的图案来填充一块区域。

gradient可以实现用渐变色来填充一块区域，渐变可以是线性（linearGradient）的，也可以是放射性（radialGradient）的。这块区域可以是fill，也可以是stroke。

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

一种可以理解为在指定区域内，规定沿x轴和y轴平铺指定数量的图案。这种方式对应的属性为patternUnits="objectBoundingBox"。objectBoundingBox也是patternUnits的默认属性值。

当patternUnits="objectBoundingBox"时，我们通过指定width和height来间接规定图案平铺的数量。因为这时，width和height被限制在0~1，或者0%~100%之间，即宽度或高度占填充区域高度或宽度的百分比。可想而知20%放5个，40%放2.5个。

<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="url(#tile)" stroke="grey"></rect>
<rect x="230" y="20" width="150" height="180" fill="url(#tile)" stroke="grey"></rect>

patternUnits并不会对内部的图案做缩放，所以第二张图中当宽度70的20%不足画出20*20的贝塞尔曲线时，曲线超出部分就被裁掉了。而第三张图中当宽度150的20%超过20时，曲线也不会被放大，超出部分由空白来填充。

默认情况下，pattern图案会将填充区域的左上角作为起点坐标(origin point)(0,0)。当然也可以通过设置x和y属性的值改变这个起点坐标。x和y分别表示相对于起点坐标的偏移量。在patternUnits="objectBoundingBox"情况下，x和y的值乘以填充区域相应的宽度和高度，即为实际起点坐标偏移量。

<defs>
    <pattern id="tile" x="0.1" y="0.1" 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="url(#tile)" stroke="grey"></rect>
<rect x="230" y="20" width="150" height="180" fill="url(#tile)" stroke="grey"></rect>

userSpaceOnUse

另一种是将pattern的宽度和高度固定住，在指定区域内平铺，能铺多少铺多少，超出部分裁掉。对应的属性为patternUnits="userSpaceOnUse"。相应的width和height即pattern的宽度和高度。

需要注意的是，userSpaceOnUse的pattern并不会在每个指定区域内重新以区域左上角开始排序。userSpaceOnUse的pattern的起点坐标只有一个，就是其x和y表示的在svg画布坐标系中的位置。 所以可以看到第二和第三个图相邻的两个图，贝塞尔曲线是连续的。我们可以改变pattern的x和y看下结果。

<defs>
    <pattern id="tile2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <path d="M 0 0 Q 5 20 10 10 T 20 20" stroke="grey" fill="none"></path>
        <rect x="0" y="0" width="20" height="20" stroke="grey" fill="none"></rect>
    </pattern>
</defs>
<rect x="10" y="10" width="100" height="100" fill="url(#tile2)" stroke="black"></rect>
<rect x="110" y="20" width="70" height="80" fill="url(#tile2)" stroke="black"></rect>
<rect x="180" y="30" width="150" height="130" fill="url(#tile2)" stroke="black"></rect>

patternContentUnits

pattern的缩放和排布由patternUnits控制，而pattern内部的图案的缩放和排布由patternContentUnits控制。

patternContentUnits也有两个属性：objectBoundingBox和userSpaceOnUse（默认属性值）

userSpaceOnUse

在userSpaceOnUse模式下，pattern内部元素的大小不会因为pattern的缩放而改变。userSpaceOnUse是patternContentUnits的默认属性值。

objectBoundingBox

在objectBoundingBox模式下，pattern内部元素所有属性的数值都会根据设置的比例，乘以pattern的width或height计算出实际长度。pattern内部元素所有属性的数值如果后面不带百分号%，都乘上100作为百分比数。所以像stroke-width默认值是1的这种属性，如果不指定一个数值，就会被当成100%来计算，结果就是撑满整个pattern。

<svg  width="600px" height="200px">
    <defs>
        <pattern id="tile1" patternUnits="objectBoundingBox"  x="0" y="0" width=".2" height=".2" patternContentUnits="objectBoundingBox">
            <path d="M 0 0 Q .05 .2 .1 .1 T .2 .2" style="stroke: black; fill: none; stroke-width: .01;"></path>
            <path d="M 0 0 h .2 v .2 h-.2z" style="stroke: black; fill: none; stroke-width: .01;"></path>
        </pattern>
    </defs>
    <g transform="translate(20,20)">
        <rect x="0" y="0" width="100" height="100" style="fill: url(#tile1); stroke: black;"></rect>
    </g>
    <g transform="translate(135,20)">
        <rect x="0" y="0" width="70" height="80" style="fill: url(#tile1); stroke: black;"></rect>
    </g>
    <g transform="translate(220,20)">
        <rect x="0" y="0" width="150" height="80" style="fill: url(#tile1); stroke: black;"></rect>
    </g>
</svg>

viewBox

可以在pattern的属性中使用viewBox完全替代patternContentUnits="objectBoundingBox"，上例用viewBox的实现如下：

<pattern id="tile2" patternUnits="objectBoundingBox"  x="0" y="0" width=".2" height=".2" viewBox="0 0 20 20" preserveAspectRatio="none">
    <path d="M 0 0 Q 5 20 10 10 T 20 20" style="stroke: black; fill: none; stroke-width: 1;"></path>
    <path d="M 0 0 h 20 v 20 h-20z" style="stroke: black; fill: none; stroke-width: 1;"></path>
</pattern>

当然，通过设置不同的preserveAspectRatio还可以实现一些patternContentUnits="objectBoundingBox"无法实现的功能。如果有viewBox属性，patternContentUnits属性将被忽略。

pattern中内嵌pattern

允许在一个pattern中的元素内，嵌入另一个pattern。

<defs>
    <pattern id="stripe" x="0" y="0" width=".2" height=".3333" patternContentUnits="objectBoundingBox">
        <path d="M0 0h1" stroke="grey" stroke-width=".02"></path>
        <path d="M0 0v1" stroke="grey" stroke-width=".02"></path>
    </pattern>
    <pattern id="circle" x="0" y="0" width=".2" height=".25" viewBox="0 0 40 40">
        <circle cx="20" cy="20" r="15" fill="url(#stripe)" stroke="black"></circle>
    </pattern>
</defs>
<path d="M0 0 h300v300h-300z" fill="url(#circle)" stroke="black"></path>