以下是一个简单的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