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>

Answer 2

来自SVG specs on "Filter Effects Region"：

通常需要提供填充空间，因为滤镜效果可能会影响给定对象上紧密贴合边框外的位。出于这些目的，可以为“x”和“y”提供负百分比值，并为“宽度”和“高度”提供大于100％的百分比值。例如，这就是为什么滤镜效果区域的默认值为x =“ - 10％”y =“ - 10％”width =“120％”height =“120％”。< / p>

由于尚未指定滤镜效果区域值，因此正在使用上述默认值。您需要提供自己的x="0" y="0" width="100%" height="100%"。

例如：http://jsfiddle.net/srnPH/

如何将fe湍流过滤器应用于形状 - 例如在SVG中圈出

2 个答案: