填充滤镜

前端教程SVG

<feFlood> 填充滤镜用纯色填充 <filter>，并且可以设置透明度，也可以设置填充区域的位置和大小。

基本语法

<filter id="floodFilter" filterUnits="userSpaceOnUse">
  <feFlood x="50" y="50" width="100" height="100"
           flood-color="green" flood-opacity="0.5"/>
</filter>

• x``y``width``height 定义了填充区域：左上角坐标、宽和高；这些值的取值范围和含义，受 <filter>.primitiveUnits 影响；
• flood-color="{color}" 填充颜色
• flood-opacity="{opacity}" 透明度

示例

通过下面的 codepen 来感受 <feFlood> 的用法：

新窗口打开