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

创建裁剪路径
使用 <use> 创建组的组合
将裁剪路径应用到组

学习

在图案制作中，_图块_是一个可以在二维平面上重复的多边形。本演示中的图块将是一系列经过变换的文本。

裁剪路径是用于限制元素"绘制"区域的多边形。在 SVG 中，裁剪路径通过 <clipPath> 元素定义。

在下面的示例中，将创建一个矩形形状的裁剪路径，其 id 为 rect-clip。

const helloClipPath = svg`
  <clipPath id="rect-clip">
    <rect width="200" height="200"></rect>
  </clipPath>
`;

要将裁剪路径应用到 SVG 元素上，clip-path 属性应通过 id 引用 <clipPath> 元素。下面的 <rect> 将通过引用 #react-clip 来被上述裁剪路径裁剪。

const helloTile = svg`
  <rect
    clip-path="url(#rect-clip)"
    width="300"
    height="300"
    fill="#000000">
  </rect>

实践

Permalink to "实践"

使用 <clipPath> 创建一个 200px 的正方形_图块_。这个 <clipPath> 将把在其内部绘制的任何内容限制在 200px 的正方形边界内。给裁剪路径一个名为 rect-clip 的 id。

const createTileBoundary = () => svg`
  <clipPath id="rect-clip">
    <rect width="200" height="200"></rect>
  </clipPath>
`;

然后给 createMotif 返回的 <g> 一个名为 motif 的 id。

const createMotif = (
  numPrints: number,
  offset: number = 0,
): SVGTemplateResult => {
  ...

  return svg`
    <g
      id="motif"
      transform="translate(50, 50)">
        ${prints}
    </g>
  `;
}

const createMotif = (
  numPrints,
  offset = 0,
) => {
  ...

  return svg`
    <g
      id="motif"
      transform="translate(50, 50)">
        ${prints}
    </g>
  `;
}

之后，将 createMotif 移到 <defs> 内部。

export class RepeatPattern extends LitElement {
  ...

  render() {
    return html`
      <svg height="100%" width="100%">
        <defs>
          ${createTileBoundary()}
          ${createElement(this.chars)}
          ${createMotif(
            this.numPrints,
            this.rotationOffset,
          )}
        </defs>
      </svg>
    `;
  }
}

创建一个名为 createTile 的函数。这个函数将通过在 <use> 元素中引用 #motif，以及在 clip-path 属性中使用 url(#rect-clip)，来利用 <defs> 中现在可用的 motif 和 clipPath。

const createTile = () => svg`
  <g clip-path="url(#rect-clip)">
    <use transform="translate(0, 0)" href="#motif"></use>
    <use transform="translate(0, 100)" href="#motif"></use>
    <use transform="translate(100, -50)" href="#motif"></use>
    <use transform="translate(100, 50)" href="#motif"></use>
    <use transform="translate(100, 150)" href="#motif"></use>
  </g>
`;

最后，在 render 期间在 svg 元素内调用 createTile。

export class RepeatPattern extends LitElement {
  ...
  render() {
    return html`
      <svg height="100%" width="100%">
        ...
        ${createTile()}
      </svg>
    `;
  }
}

本演示组合了一个包含五组旋转文本的图块，以创建无缝的偏移重复。不过，放置位置和数量是任意的。

尝试不同的变化吧！createTile 函数将是未来图案的基础。