我想在 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>
最佳答案
只需调整滤镜的 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="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur in="SourceGraphic" stdDeviation="15"/>
</filter>
</defs>
<circle cx="100" cy="100" r="30" fill="#ff0000" filter="url(#f1)"/>
</svg>
关于svg - svg 中模糊圆圈的错误渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54328919/