SVG HTML

Flood Filter

This SVG example illustrates how to apply a flood filter.

FloodFilter.svg

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="idFloodFilter">
    <feFlood in="SourceGraphic" x="0" y="0" width="100%" height="100%"
          flood-color="blue" flood-opacity="1" result="imgFlood" />
    <feBlend in="SourceGraphic" in2="imgFlood" mode="normal" />
  </filter>
  <!-- Original Version -->
  <circle cx="100" cy="100" r="75" fill="none" stroke="black" stroke-width="10"></circle>
  <!-- Filtered Version -->
  <g style="filter: url(#idFloodFilter)" transform="translate(200, 0)">
    <circle cx="100" cy="100" r="75" fill="none" stroke="black" stroke-width="10"></circle>
  </g>
</svg>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.