平铺滤镜

前端教程SVG

#<feTile> 平铺滤镜把输入源图片作为可重复的、平铺的图案，填充到一个矩形区域。类似于 <pattern> 元素的效果。

基本语法

<filter id="tile" x="0" y="0" width="100%" height="100%">
  <feTile x="50" y="50" width="100" height="100" />
</filter>

<image href="http://xxx.xxx.xxx.png" filter="url(#tile)"/>

• 此滤镜没有特有的选项
• x``y``width``height 决定把输入源图片的哪个区域作为图案来使用

示例

以下 codepen 介绍了 <feTile> 的使用方法：

• <filter id="myFilter" x="0%" y="0%" width="100%" height="100%">
  • 由于 <filter>.filterUnits 默认为 userSpaceOnUse，所以上面的选项导致 <filter> 占满了整个 SVG
• <filter id="myFilter" x="0%" y="0%" width="100%" height="100%">
  • 由于 <filter>.primitiveUnits 默认为 objectBoundingBox，所以上面的选项导致 <feTile> 使用了整个 <circle id="myCircle"> 图形，并以此填充了整个 <filter>
• 下面的蓝色圆圈，表示原始图形，红色圆圈区域是重复平铺后的图形。

新窗口打开