SVG 模糊滤镜有硬边框

Question

我有这段代码，我想在其中将 feGaussianBlur 添加到 <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%"

见Filter effects region

<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>

SVG 模糊滤镜有硬边框

SVG blur filter has hard borders

svg

svg-filters