SVG(可缩放矢量图形)可以通过使用<filter>元素来添加模糊效果。常见的模糊效果包括高斯模糊(Gaussian Blur)。

以下是一个简单的SVG示例,演示如何在一个圆形元素上添加高斯模糊效果:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 创建一个模糊效果 -->
  <defs>
    <filter id="blurFilter" x="0" y="0" width="100%" height="100%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>

  <!-- 在圆形元素上应用模糊效果 -->
  <circle cx="50" cy="50" r="40" fill="blue" filter="url(#blurFilter)" />
</svg>

在这个例子中,<filter>元素定义了一个名为"blurFilter"的滤镜,其中使用了<feGaussianBlur>来实现高斯模糊。stdDeviation属性控制了模糊的程度。

然后,圆形元素 <circle> 使用 filter 属性引用了这个滤镜,从而在圆形上应用了模糊效果。

你可以根据需要调整 <feGaussianBlur> 元素的 stdDeviation 属性来改变模糊的程度。


转载请注明出处:http://www.pingtaimeng.com/article/detail/12388/SVG