Как применить фильтр feTurbulence к форме - например, Круг в SVG

Question

У меня есть следующий код SVG:

<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);" /> 

И я получаю большую часть того, что я хочу, но по некоторым причинам я не могу понять, как применить фильтр только круг - он всегда применяет его к ограничивающей коробке плюс 10%. Я мог бы прибегнуть к обрезке, но предпочел бы, чтобы научиться применять фильтры только к формам, которые я хочу использовать ...

УКАЗАНИЕ Это не должно быть слияние, я пробовал композицию с не очень удачей - я просто вам нужен самый эффективный способ применить фильтр к форме без обрезки - если это возможно.

Answer 1

Вы хотите использовать feComposite "в", чтобы сделать это.

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

Answer 2

От SVG specs on "Filter Effects Region":

Часто бывает необходимо, чтобы обеспечить пространство обивка, поскольку эффект фильтра может повлиять на биты немного за пределами ограничивающей рамки плотно закрывающейся на данном объекте. Для этих целей можно указать отрицательные процентные значения для «x» и «y», а значения процентов больше 100% для «ширины» и «высоты». Это, например, поэтому значения по умолчанию для области эффектов фильтра: x = "- 10%" y = "- 10%" width = "120%" height = "120%".

Поскольку вы не указали значения области эффектов фильтра, используются значения по умолчанию, как описано выше. Вам нужно поставить свой собственный x="0" y="0" width="100%" height="100%".

Например: http://jsfiddle.net/srnPH/