如何將feFurbulence濾波器應用於形狀 - 例如圈中SVG

我有以下的SVG代碼：如何將feFurbulence濾波器應用於形狀 - 例如圈中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％。我可以訴諸裁剪，但寧願學習如何將過濾器只適用於我想要影響的形狀...

請注意，它不必合併，我已經嘗試複合運動也沒有太多運氣 - 我只是想要最有效的方式將過濾器應用到沒有剪裁的形狀 - 如果可能的話。

來源

2012-01-24 BigMac66

你想「在」使用feComposite做到這一點。

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

來源

2013-03-12 16:29:55

太棒了！完全按照我想要的方式工作。抱歉花了這麼長時間來獎勵你的工作 - 有點忘了這個... – BigMac66

從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/

來源

2012-01-25 00:54:52 Phrogz

如何將feFurbulence濾波器應用於形狀 - 例如圈中SVG

回答

相關問題