SVG 图案填充和描边

# 图案填充

使用pattern标签创建预定义图案，然后引用它。它有x和y属性，用来指定图案的起始点的坐标。它还有一个width和height属性，用来指定图案的宽度和高度。 SVG中有两种图案填充方式：fill和stroke。fill属性用于填充图形，stroke属性用于描边图形。

它还有以下属性：

• viewBox，用于指定图案的可视区域，可以看这一期「viewbox属性」。
• patternUnits，用于指定图案的坐标单位，默认值为objectBoundingBox，可以看这一期「maskUnits属性」
• patternContentUnits，默认值为userSpaceOnUse，用于指定图案内容的坐标单位， 「maskContentUnits属性」
• patternTransform，用于指定图案的变换，可以看这一期「transform属性」

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <radialGradient id="g1">
      <stop offset="0%" stop-color="#03001e" />
      <stop offset="33%" stop-color="#7303c0" />
      <stop offset="66%" stop-color="#ec38bc" />
      <stop offset="100%" stop-color="#fdeff9" />
    </radialGradient>
    <pattern id="p1" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" fill="url(#g1)" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="url(#p1)" />
</svg>

# 图案描边

一样和上面定义图案，然后使用stroke属性来描边图形。

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <pattern id="p2" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="5" fill="url(#g1)" />
    </pattern>
  </defs>
  <circle cx="50" cy="50" r="30" stroke="url(#p2)"
  stroke-width="10" fill="none" />
</svg>

# 图案嵌套

在同一个图案定义中，可以嵌套定义图案。

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <pattern id="p-child" width="4" height="4" patternUnits="userSpaceOnUse">
      <rect x="2" y="2" width="2" height="2" fill="url(#g1)" />
    </pattern>
    <pattern id="p-parent" width=".25" height=".25">
      <circle cx="12.5" cy="12.5" r="5" fill="url(#p-child)" />
    </pattern>
  </defs>
  <circle cx="50" cy="50" r="40" fill="url(#p-parent)
  " stroke="url(#g1)" />
</svg>