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>