SVG 模糊滤镜具有硬边框答案

【问题标题】：SVG blur filter has hard bordersSVG 模糊滤镜具有硬边框
【发布时间】：2019-04-10 10:00:54
【问题描述】：

我有这段代码，我想在其中添加一个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 时不能正常工作？我能做些什么来实现它？

【问题讨论】：

Why does this SVG filter unexpectedly clip off ~15% from shape的可能重复

标签： svg svg-filters

【解决方案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>

【讨论】：