SVG 模糊效果

<defs> 和 <filter>

所有 Internet SVG 滤镜都在 <defs> 元素中定义。

<defs> 元素是定义的缩写，包含特殊元素（例如滤镜）的定义。

<filter> 元素用于定义 SVG 滤镜。

<filter> 元素具有必需的 id 属性，用于标识滤镜。图形然后指向要使用的滤镜。

SVG <feGaussianBlur>

<feGaussianBlur> 元素用于创建模糊效果：

下面是 SVG 代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
  <h1>SVG 模糊效果</h1>
  <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>
</body>
</html>

尝试一下

上面代码解析：

<filter> 元素的 id 属性定义了滤镜的唯一名称
模糊效果由<feGaussianBlur>元素定义
in ="SourceGraphic" 部分定义为整个元素创建效果
stdDeviation 属性定义模糊量
<rect> 元素的 filter 属性将元素链接到 "f1" 滤镜

<defs> 和 <filter>

SVG <feGaussianBlur>

相关页面