How to apply feTurbulence filter to shape - e.g. 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 not figure out how to apply the filter to just the circle - it always applies it to the bounding box plus 10%. I could resort to clipping but would prefer to learn how to apply filters only to the shapes I want to effect...

NOTE it does not have to be merge, I have tried composite with not much luck too - I just want the most efficient way to apply a filter to a shape without clipping - if it is possible.

Answer 1

You want to use feComposite "in" to do this.

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

Answer 2

From the SVG specs on "Filter Effects Region":

It is often necessary to provide padding space because the filter effect might impact bits slightly outside the tight-fitting bounding box on a given object. For these purposes, it is possible to provide negative percentage values for ‘x’ and ‘y’, and percentages values greater than 100% for ‘width’ and ‘height’. This, for example, is why the defaults for the filter effects region are x="-10%" y="-10%" width="120%" height="120%".

Since you have not specified the filter effects region values, the defaults as described above are being used. You need to supply your own x="0" y="0" width="100%" height="100%".

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