<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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
feTile
in

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见