svg - 如何将 feTurbulence 过滤器应用于形状 - 例如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>