如何将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%.我可以诉诸裁剪但更愿意学习如何仅将滤镜应用于我想要影响的形状......

注意它不必合并,我已经尝试过复合,运气也不多 - 我只想要一种最有效的方法将滤镜应用到没有剪裁的形状 - 如果可能的话.

Answer 1

您想使用feComposite"in"来执行此操作.

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