SVG 元素

SVG pattern 元素是一个用于重复填充的模板。它可以用于填充一个形状或路径，也可以用于作为一种纹理或背景。

语法

SVG <pattern> 元素的语法如下所示：

<pattern id="pattern_id" x="x_coord" y="y_coord" width="width" height="height" patternUnits="units_type" patternContentUnits="units_type">
  <rect x="x_coord" y="y_coord" width="width" height="height" fill="color" />
  <!-- 或其他可重复的图形元素 -->
</pattern>

<pattern> 元素需要一个 id 属性来标识这个模板。x 和 y 属性用于指定这个模板相对于绘图区域的位置。width 和 height 属性则指定了这个模板的大小。

patternUnits 属性用于指定 x、y、width 和 height 属性的单位，默认为 userSpaceOnUse，表示使用用户坐标系（像素）。也可以指定为 objectBoundingBox，表示相对于被填充对象的边界框（0-1 的小数表示）。

patternContentUnits 属性用于指定模板内部图形的单位，与 patternUnits 类似，也可用 userSpaceOnUse 或 objectBoundingBox。

最后，模板内部必须包含一个或多个可重复的图形元素，如 <rect>、<circle>、<ellipse> 或 <path>。

示例

下面是一个使用 <pattern> 元素的示例：

<svg width="200" height="200">
  <defs>
    <pattern id="stripes" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
      <rect x="0" y="0" width="10" height="10" fill="#ffffff" />
      <line x1="0" y1="0" x2="10" y2="0" stroke="#000000" stroke-width="1" />
    </pattern>
  </defs>

  <rect x="0" y="0" width="200" height="200" fill="url(#stripes)" />
</svg>

以上代码创建了一个大小为 10px x 10px 的斜条纹的模板，然后使用该模板填充一个 200px x 200px 的矩形。

总结

SVG <pattern> 元素提供了一种灵活的方式来创建可重复的图案和纹理。它非常适合用于填充复杂的形状和路径，同时也能提供一些简单的纹理和背景效果。