SVG feFlood 标签

简介

简单来说是一个颜色块滤镜,可以和滤镜配合做出不同的颜色效果;它主要有2个专有属性:

属性 说明
flood-color 定义颜色
flood-opacity 定义不透明度,值范围从0全透明到1全不透明,默认是1

实例

定义2个矩形,一个 0.5 透明度绿色,一个 1 透明度蓝色,使用 <use> 引用得到色块效果;
然后定义两个圆形,其中一个使用滤镜 floodFilter3,可以看到圆形被强制覆盖的效果;

<svg version="1.1" height="200" width="400" xmlns="http://www.w3.org/2000/svg">
   <defs>
        <filter id="floodFilter1" filterUnits="userSpaceOnUse">
            <feFlood x="30" y="20" width="100" height="100" flood-color="green" flood-opacity="0.5"/>
        </filter>
        <filter id="floodFilter2" filterUnits="userSpaceOnUse">
            <feFlood x="70" y="80" width="100" height="100" flood-color="blue" flood-opacity="1"/>
        </filter>
       <filter id="floodFilter3" filterUnits="userSpaceOnUse">
           <feFlood x="220" y="80" width="100" height="100" flood-color="blue" flood-opacity="0.5"/>
       </filter>
   </defs>
    <use filter="url(#floodFilter1)"/>
    <use filter="url(#floodFilter2)"/>
    <circle cx="220" cy="60" r="40" fill="red"/>
    <circle cx="260" cy="120" r="40" fill="red" filter="url(#floodFilter3)"/>
</svg>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注