<feTile>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<feTile> SVG 滤镜原语允许使用输入图像的重复、平铺模式来填充目标矩形。此效果类似于 <pattern> 元素的效果。

使用上下文

类别滤镜元素
允许的内容任意数量、任意顺序的下列元素：
<animate>、<set>

属性

DOM 接口

此元素实现了 SVGFETileElement 接口。

示例

SVG

html
<svg
  width="200"
  height="200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>
    使用 Mozilla 品牌吉祥物的头部（该头部出现在徽标上）平铺 MDN 徽标
  </title>
  <defs>
    <!-- 定义滤镜的作用区域为 MDN 徽标（应用滤镜的图像）的边框。这些参数将创建一个与图像覆盖相同区域的输出。 -->
    <filter id="tile" x="0" y="0" width="100%" height="100%">
      <!-- 从图像中央区域创建一个图块，该区域从（50，50）到（150，150）。这个区域实质上是 Mozilla 吉祥物的头部。 -->
      <feTile in="SourceGraphic" x="50" y="50" width="100" height="100" />

      <!-- 如果不指定区域，默认情况下，feTile 会使用滤镜的整个区域。如果不指定“in”参数，那么默认值就是前一个滤镜原语的结果。因此，这第二个 feTile 会将吉祥物头部的图案在整个滤镜区域内进行平铺。 -->
      <feTile />
    </filter>
  </defs>

  <!-- 将 MDN 徽标作为输入传递给滤镜 -->
  <image
    href="mdn_logo_only_color.png"
    x="10%"
    y="10%"
    width="80%"
    height="80%"
    style="filter:url(#tile);" />
</svg>

结果

规范

Specification
Filter Effects Module Level 1
# feTileElement

浏览器兼容性

BCD tables only load in the browser

参见