时间戳

首页 > 解决方案 > svg中模糊圆圈的错误渲染

svg - svg中模糊圆圈的错误渲染

问题描述

我想在 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>

标签： 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>

推荐阅读