svg 圆形边缘模糊
时间: 2023-11-02 11:05:25 浏览: 147
你可以使用SVG的`filter`属性来给圆形添加边缘模糊效果。以下是一个示例代码:
```html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<circle cx="100" cy="100" r="50" fill="#ff0000" filter="url(#blur)" />
</svg>
```
在上面的代码中,我们使用`filter`元素定义了一个名为"blur"的滤镜。滤镜中使用了`feGaussianBlur`元素来进行高斯模糊,`stdDeviation`属性用于控制模糊的程度。然后,我们将这个滤镜应用到圆形上,通过`filter`属性指定滤镜的id。
你可以调整`stdDeviation`的值来改变模糊效果的强度。
阅读全文