<feTile>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<feTile> SVG 滤镜原语允许使用输入图像的重复、平铺模式来填充目标矩形。此效果类似于 <pattern> 元素的效果。
使用上下文
属性
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 |