SVG Filters之虚化Blur Effects

最新推荐文章于 2025-05-17 10:36:55 发布

weixin_34198797

最新推荐文章于 2025-05-17 10:36:55 发布

阅读量412

点赞数

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/46972

本文介绍了SVG滤镜的各种类型，如feGaussianBlur等，并通过示例展示了如何在SVG元素上应用这些滤镜来实现视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SVG 滤镜

在 SVG 中，可用的滤镜有：

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

注意：

您可以在每个 SVG 元素上使用多个滤镜！
IE 、Safari浏览器暂不支持滤镜!

虚化Blur Effects;

<filter>标签用来定义 SVG 滤镜。<filter>标签使用必需的 id 属性来定义向图形应用哪个滤镜？ <filter>标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

SVG <feGaussianBlur>

示例1

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>