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>