SVG feFlood Filter

by Online Tutorials Library July 14, 2022

SVG <feFlood> Filter

The <feFlood> elements are utility filters. It is used to primitive fill the filter sub region with the color and opacity.

Example

  <!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>  

Test it Now

Next TopicSVG feComponentTransfer Filter

SVG feFlood Filter

SVG <feFlood> Filter

Example

SVG Animation

Data Window in Tableau | Data Types in Tableau

You may also like