<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 创建一个矩形 -->
<rect width="100%" height="100%" fill="#3498db" />
<!-- 应用高斯模糊滤镜 -->
<filter id="blurFilter" x="0" y="0" width="100%" height="100%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<!-- 使用滤镜效果 -->
<rect width="150" height="150" fill="#e74c3c" filter="url(#blurFilter)" />
</svg>
在上面的示例中,我们创建了一个蓝色的矩形,然后应用了一个名为"blurFilter"的高斯模糊滤镜。这个滤镜通过feGaussianBlur元素实现,其中的stdDeviation属性决定了模糊的程度。最后,我们创建了一个红色的矩形,并在其上应用了之前定义的滤镜,从而使该矩形显示模糊效果。
你可以根据需要调整矩形的大小、颜色以及滤镜的参数来满足你的设计需求。
转载请注明出处:http://www.pingtaimeng.com/article/detail/14678/SVG