How to apply feTurbulence filter to a form - for example, Circle in SVG

Question

I have the following SVG code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%"> <defs> <radialGradient id="star_grad"> <stop offset="0%" style="stop-color: #faf589;"/> <stop offset="50%" style="stop-color: #fbf300;"/> <stop offset="100%" style="stop-color: #fbbc00;"/> </radialGradient> <filter id="star_filter"> <feTurbulence baseFrequency=".04" result="ripples" /> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode in="ripples" /> </feMerge> </filter> </defs> <circle cx="50%" cy="50%" r="25%" style="fill: url(#star_grad); filter: url(#star_filter);" /> 

And I get most of what I want, but for some reason I can’t figure out how to apply the filter only to the circle — it always applies it to the bounding box plus 10%. I could resort to cropping, but would rather learn to apply filters only to the shapes that I want to use ...

NOTE that this should not be a merge, I also tried composition with great luck - I just want the most effective way to apply a filter to a shape without cropping - if possible.

Answer 1

You want to use feComposite "in" for this.

 <filter id="star_filter"> <feTurbulence baseFrequency=".04" result="ripples" /> <feComposite operator="in" in="ripples" in2="SourceGraphic"/> </filter> 

Answer 2

From the SVG specifications in the Filtering Effects section :

It is often necessary to provide padding space because the filter effect can affect bits a little outside the bounding box on a given object. For these purposes, you can specify negative percentages for "x" and "y", and percentages are greater than 100% for "width and height". This, for example, is why the default values ​​for the filter effects area are: x = "- 10%" y = "- 10%" width = "120%" height = "120%" .

Since you did not specify values ​​for the filter effects area, the default values ​​are used, as described above. You need to provide your own x="0" y="0" width="100%" height="100%" .

For example: http://jsfiddle.net/srnPH/