Re: How to clip/mask a filter?

On Thu, 28 Oct 2010 22:19:31 +0200, BishKopt <bishkopt@gmail.com> wrote:

> Hello all,
>
> I'm having a problem with implementing one of my ideas: I'd like to
> have the whole page blurred, except a focus point - a circle in the
> middle of the page. Additionally, the circle wouldn't have sharp edges
> - it would have some kind of RadialGradient (lack of the filter inside
> (sharp) and gradually blurring outside to fit the rest of the page)...

You could draw the whole page twice, once with blur, once without blur but  
with a mask and make that be on top. Or you could write a filterchain that  
does it all in one go.

> It wouldn't be a problem if that was not to be a blur filter, but a
> color - simply masking. However...
>
> Is it possible to "mask a filter region" or make a filter region to be
> eg. circle (instead of the whole element)?

You can do the masking inside the filter chain if the UA supports feImage  
fully (that is: if it allows pointing to arbitrary elements and not just  
raster images). You can of course use a rasterimage mask too, but then  
it's not as scalable. An example of this technique can be seen here[1].  
The relevant bits:

   <defs>
     <radialGradient id="fade">
       <stop stop-opacity="1" offset="0.7"/>
       <stop stop-opacity="0" offset="1"/>
     </radialGradient>

     <filter id="filter" filterUnits="userSpaceOnUse">
       <!-- mask rect edges -->
       <feImage xlink:href="#mask" result="mask"/>
       ...
       <!-- apply mask -->
       <feComposite operator="in" in2="mask" in="dist"/>
     </filter>

     <circle id="mask" r="200" fill="url(#fade)"/>
   </defs>

Then use the filter as you would in general.

Cheers
/Erik

[1] http://svg-wow.org/blog/2009/10/04/ripple/

-- 
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

Received on Monday, 1 November 2010 11:57:01 UTC