Apply SVG filter to PART of the SVG

Is this possible? I have an svg, and I want to overlay a portion of that svg with a transparent rectangle. Is is possible to have the part of the SVG that is covered to change color, or glow, etc?

Solution

Yes it is. You can extract the overlapping area using an feComposite "in", apply an effect to it, and then recomposite that result on top of the original graphic. Things get more complex if you have variable opacity, but the concept is the same. Post a fiddle with your SVG and I'll take a shot at writing the filter for you.

Update:

Here's how you do it:

   <filter id="greenify">

        <feFlood flood-color="#ff0770" flood-opacity="1" x="50" y="30" height="40" width="260" result="A"/> 
        <feComposite operator="in" in2="SourceGraphic" in="A" result="B"/>
        <feColorMatrix type="hueRotate" in="B" result="C" 
            values ="90" /> 
        <feComposite operator="over" in2="SourceGraphic" in="C"/>

   </filter>

The first feFlood creates a color rectangle for you. Then the feComposite extracts the overlapping area. The feColorMatrix changes its color (so you know it's not the original rectangle in the result), then the feComposite overlays the new green area on top of the original SourceGraphic.

http://jsfiddle.net/jsfmullany/Jys7a/1/