<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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

使用上下文

类别滤镜元素
允许的内容任意数量、任意顺序的下列元素：
<animate>、<discard>、<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

浏览器兼容性

参见