SVG填充图案用于使用由图像组成的图案填充形状。此图案可以是SVG图像（形状）或者位图图像组成。
SVG填充图案看起来像Photoshop中被称为“瓷砖”的东西。
填充图案示例
下面是一个简单的SVG填充图案的例子：
<defs>
<pattern id="pattern1"
x="10" y="10" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
首先，在<defs>元素内部定义了一个<pattern>元素。pattern包含一个circle元素。这个circle元素将被用作填充图案。
然而，声明一个<rect>元素，并在其style属性里的CSS属性fill引用<pattern>元素的ID。
最终图片如下：
>
注意观察，在<pattern>元素中定义的圆如何用作矩形的填充，以及圆如何从左到右，从上到下重复的。
X,Y,Width和Height
pattern元素的x和y属性定义重复的图案在形状中的开始位置。
<pattern>元素的width和height属性定义图案的宽度和高度。
下面是刚开始的例子，但是x和y被设置为0：
<defs>
<pattern id="pattern2"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
最终图片如下：
>
注意，该图案现在从圆的中间开始（矩形顶部和左边缘），当你创建自己的填充模式时，你将不得不使用x和y值来实现你想要的效果。
width和height属性设置图案的宽度和高度。
之前的例子中，width和height都被设置为圆的直径20。因此，这些重复的圆之间没有空隙。
下面的例子中，图案的width被设置为25。你会发现，现在圆在水平方向之间有5像素的空隙。
>
下面的例子也将height设置为25：
>
下面是一个同样的例子，但是将x和y设置为10（<pattern>元素中圆的圆心）：
>
现在图案从一个完整的圆开始，但仍然有额外的垂直和水平空隙。
嵌套图案
可以通过嵌套填充图案，使得一个填充图案内部使用另一个填充图案。这里是一个使用圆形作为矩形填充图案的示例。圆内部又使用一个矩形作为填充图案。
<defs>
<pattern id="innerPattern"
x="3" y="3" width="9" height="9"
patternUnits="userSpaceOnUse"
>
<rect x="0" y="0" width="6" height="6"
style="stroke: none; fill: #ff0000;" />
</pattern>
<pattern id="outerPattern"
x="12" y="12" width="25" height="25"
patternUnits="userSpaceOnUse"
>
<circle cx="10" cy="10" r="10"
style="stroke: #0000ff; fill: url(#innerPattern)" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100"
style="stroke: #000000; fill: url(#outerPattern);" />
最终图片如下：
正如你所看到的，外部矩形使用圆填充，圆又使用矩形填充。
变换图案
你可以通过patternTransform属性对填充图案使用标准的SVG变换函数。示例如下：
<defs>
<pattern id="transformedPattern"
x="10" y="10" width="20" height="20"
patternUnits="userSpaceOnUse"
patternTransform="rotate(35)"
>
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100"
style="stroke: #000000;
fill: url(#transformedPattern);" />
这个例子定义了一个简单的图案，并在用作矩形的填充图案前将其旋转35度。最终图片如下：
