本节教程介绍 SVG 中 <pattern> 元素的基础知识，包括如何：

定义 <pattern> 元素
将 <pattern> 用作填充

学习

在 SVG 中，<pattern> 元素会在二维平面上视觉上重复其子元素。

patternUnits 属性定义了用于绘制图案的相对坐标几何。将 patternUnits 设置为 userSpaceOnUse 会使几何坐标相对于用户空间。在这种情况下，用户空间就是 DOM。

const helloPattern = svg`
  <pattern patternUnits="userSpaceOnUse">
    ${createTile()}
  </pattern>
`;

<pattern> 元素可以被赋予一个 id，并作为 fill 在其他 SVG 元素中引用，如下例所示：

const helloPattern = svg`
  <pattern
    id="hello-pattern"
    patternUnits="userSpaceOnUse">
    ${createTile()}
  </pattern>
`;

const helloPatternFill = svg`
  <rect fill="url(#hello-pattern)" width="200" height="200"></rect>
`;

实践

Permalink to "实践"

创建一个名为 createRepeatPattern 的函数，返回一个 pattern 元素。在 <pattern> 元素内调用 createTile。给 <pattern> 一个 id 为 repeat-pattern。

提供 pattern 属性，如 height 和 width，来定义图块的绘制方式。以下示例创建了一个 200px 的正方形图块，垂直和水平偏移为 -10。图案使用 userSpaceOnUse 定义的几何坐标进行绘制。

const createRepeatPattern = () => svg`
  <pattern
    id="repeat-pattern"
    x="-10"
    y="-10"
    width="200"
    height="200"
    patternUnits="userSpaceOnUse">
    ${createTile()}
  </pattern>
`;

将 createRepeatPattern 放入 render 中的 <defs> 元素内，使 #repeat-pattern 可被其他元素使用。

render() {
  return html`
    <svg height="100%" width="100%">
      <defs>
        ...
        ${createRepeatPattern()}
      </defs>
    </svg>
  `;
}

在 repeat-pattern 的 render 方法中添加两个 <rect> 元素。一个 rect 将作为纯白色背景。另一个 rect 将通过 #repeat-pattern 引用 <pattern> 元素作为 fill。然后从 render 中移除对 createTile 的调用。

render() {
  return html`
    <svg height="100%" width="100%">
      ...
      <rect height="100%" width="100%" fill="#ffffff"></rect>
      <rect height="100%" width="100%" fill="url(#repeat-pattern)"></rect>
    </svg>
  `;
}