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>

最佳答案

只需调整滤镜的 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/

相关文章:

javascript - 时间线图表栏错误 : <text> attribute x: Expected length, "NaN"

javascript - 是否可以使用 CSS 在 DOM 元素上为 SVG 背景设置动画?

css - 不显示内联背景 SVG 图像

java - 如何使用 batik 获取 SVG 图像的图像大小(宽度/高度)

css - 在 Opera 中使用 SVG Sprite 渲染效果不佳

javascript - 在 MorphSVG 中悬停时更改渐变背景

javascript - 如何使这个 svg 圆圈可点击

javascript - D3 : Using force layout for word clouds

javascript - 如何将内联 svg(在 DOM 中)绘制到 Canvas 上?

jquery - 如何在rapahel文本上实现上标