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>元素，该元素在fillCSS属性中引用其<style>属性的<pattern>元素ID。
：

注意，在<pattern>元素中定义的圆是如何用作矩形的填充。还请注意，如何从左到右，从上到下一遍又一遍地重复该圆。

X，Y，宽度和高度

<pattern>元素的x和y属性定义了图案开始到<pattern>元素中的形状的距离。

<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"都设置为20，即圆的直径。因此，这些圆圈一遍又一遍地重复着，中间没有空格。

在此示例中，图案的"宽度"设置为25而不是20。请注意，水平圆圈之间现在有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);" />

如我们所见，外部矩形现在由圆形填充，圆形又由矩形填充。

转换模式

我们可以使用标准SVG转换函数来转换填充图案。我们可以使用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度。