svg 中模糊圆圈的渲染错误

Question

我想在 svg 中绘制一个模糊的圆圈，但如果 stdDeviation 值较高，它会被裁剪。

我尝试了几个属性，例如“feGaussianBlur”标签上的“edgeMode”或“circle”和“filter”标签上的“width=”150%”'和“height=”150%”'，但没有任何帮助。

有什么想法吗？

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="f1">
            <feGaussianBlur in="SourceGraphic" stdDeviation="15"/>
        </filter>
    </defs>
    <circle cx="100" cy="100" r="30" fill="#ff0000" filter="url(#f1)"/>
</svg>

Answer 1

只需调整滤镜的 x、y、宽度和高度即可。

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="f1" x="-60%" y="-60%" width="220%" height="220%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="15"/>
        </filter>
    </defs>
    <circle cx="100" cy="100" r="30" fill="#ff0000" filter="url(#f1)"/>
</svg>