SVG <feFlood> 滤镜

2025 年 3 月 17 日 | 阅读 1 分钟

<feFlood> 元素是实用滤镜。它用于使用颜色和不透明度填充滤镜子区域。

示例

<!DOCTYPE html>
<html>
<body>
<svg height="900" width="900">

<filter id="f1">
<feFlood x="5%" y="10%" width="30%" height="30%" flood-color="green" flood-opacity=".6"/>
</filter>
<rect x="10%" y="15%" width="20%" height="20%" fill="none" stroke-width="2" stroke="blue"/>
<rect x="10%" y="15%" width="20%" height="20%" filter="url(#f1)"/>
<rect x="40%" y="15%" width="20%" height="20%" fill="red" stroke-width="2" stroke="black"/>
<rect x="60%" y="15%" width="20%" height="20%" filter="url(#f1)"/>

</svg>
</body>
</html>

立即测试

下一个主题SVG feComponentTransfer 滤镜

← 上一个下一个 →