SVG 模糊滤镜具有硬边框

Question

我有这段代码，我想在其中添加 afeGaussianBlur到<rect/>元素：

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
    <defs>
        <filter id="f">
            <feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
        </filter>
    </defs>
    <rect x="100" y="100" height="200" width="180" fill="green" filter="url(#f)"/>
</svg>

输出呈现如下：

正如您所看到的，侧面没有软化。两侧有硬边框。
但是，当我减少 的值时stdDeviation，它效果很好。stdDeviation如果 的值设置为 10，则输出如下：

为什么值大于 10 时不能正常工作？我能做些什么来实现它？

Answer 1

扩大过滤区域

x="-20%" y="-20%" width="150%" height="150%"

请参阅滤镜效果区域

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
    <defs>
        <filter id="f" x="-20%" y="-20%" width="150%" height="150%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
        </filter>
    </defs>
    <rect x="100" y="100" height="200" width="180" fill="green" filter="url(#f)"/>
</svg>