SVG feTile 元素

SVG（Scalable Vector Graphics，可伸缩矢量图形）feTile 元素是用于指定图像图案块的元素。它可用于实现平铺效果，使图像或图案可以在指定区域内不间断地重复出现。

语法

<feTile in="SourceGraphic | ..."/>

属性

• in：可选。指定输入源（源图像或其他滤镜效果）。

示例

以下示例演示如何使用 feTile 元素创建平铺效果。在这个示例中，我们使用一张图片来作为输入源，使用 feTile 元素，并在下面添加了一个文本标签。

<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="tile-pattern" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="https://picsum.photos/100" x="0" y="0" width="100" height="100"/>
    </pattern>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#tile-pattern)"/>
  <text x="50%" y="50%" text-anchor="middle" fill="white">Hello, world!</text>
</svg>

在示例中，我们先定义了一个 pattern 元素，这个元素指定了图像的宽度和高度，并使用 image 元素嵌套一个图片。然后，在 SVG 中使用 rect 元素，填充为 pattern 元素，使其重复出现。最后，我们添加了一个文本标签在图像上。

输出效果

总结

通过 feTile 元素，我们可以轻松地实现平铺效果，以便为图像或图案创建无缝的平铺效果。除了使用 image 元素来指定图片，我们还可以使用其他滤镜效果或源图像作为输入源。