如何将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

回答

相关问题