fe 터뷸런스 필터를 모양에 적용하는 방법 - 예 : 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 %를 더한 값을 적용합니다. 나는 클리핑에 의지 할 수 있지만 효과를 내고자하는 모양에만 필터를 적용하는 방법을 배우는 것을 선호합니다 ...

참고 사항 병합 할 필요는 없습니다. 많은 행운을 지닌 합성물도 시도했습니다. 가능한 경우 클리핑하지 않고 도형에 필터를 적용하는 가장 효율적인 방법을 원합니다. SVG specs on "Filter Effects Region"에서

Answer 1

당신은이 작업을 "의"feComposite을 사용하고 싶습니다.

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

Answer 2

:

필터 효과는 지정된 개체에 꽉 끼는 경계 상자 외부에 약간의 비트에 영향을 미칠 수 있기 때문에 패딩 공간을 제공하는 것이 필요하다

. 이러한 목적을 위해 'x'및 'y'에 대한 음수 백분율 값과 'width'및 'height'에 대한 백분율 값을 100 %보다 크게 제공 할 수 있습니다. 예를 들어, 필터 효과 영역의 기본값은 x = "- 10 %"y = "- 10 %"width = "120 %"height = "120 %"입니다.

필터 효과 영역 값을 지정하지 않았으므로 위에 설명 된 기본값이 사용됩니다. 자신의 x="0" y="0" width="100%" height="100%"을 제공해야합니다. 예를 들어

: http://jsfiddle.net/srnPH/