Gauss Zhou

# 图案 Patterns

在我看来 patterns（图案）是 SVG 中用到的最让人混淆的填充类型之一。

它的功能非常强大，所以我认为他们值得讨论一下并且我们应至少对他们有最基本的了解。

跟渐变一样，<pattern>需要放在 SVG 文档的 <defs> 内部。

<svg width="310" height="100" style="border:1px solid">
  <defs>
    <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <circle fill="#bee9e8" cx="50" cy="50" r="35" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>

上面代码中，<pattern>标签将一个圆形定义为 dots 模式。patternUnits="userSpaceOnUse"表示<pattern>的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。