如何将feTurbulence过滤器应用于形状-例如SVG中的圆形
我有以下SVG代码:如何将feTurbulence过滤器应用于形状-例如SVG中的圆形,svg,svg-filters,Svg,Svg Filters,我有以下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;"/>
<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%。我可以求助于剪辑,但更愿意学习如何将过滤器仅应用于我想要效果的形状
请注意,它不必合并,我也尝试过合成,运气也不太好-我只想用最有效的方法对形状应用过滤器而不进行剪裁-如果可能的话。来自:
通常有必要提供填充空间,因为过滤效果可能会对给定对象上紧配合边界框外的位产生轻微影响。出于这些目的,可以为“x”和“y”提供负值,为“宽度”和“高度”提供大于100%的百分比值。例如,这就是为什么过滤效果区域的默认值是x=“-10%”y=“-10%”宽度=“120%”高度=“120%”
由于尚未指定“过滤效果”区域值,因此将使用上述默认值。您需要提供自己的x=“0”y=“0”width=“100%”height=“100%”
例如:您希望使用feComposite“in”来执行此操作
<filter id="star_filter">
<feTurbulence baseFrequency=".04" result="ripples" />
<feComposite operator="in" in="ripples" in2="SourceGraphic"/>
</filter>
帅哥!工作完全符合我的要求。抱歉花了这么长时间来奖励你的工作-有点忘了这一点…非常感谢!