目录

SVG 模糊效果

❮ 上一节下一节 ❯

<定义> 和 <过滤器>

所有互联网 SVG 过滤器都在 <defs> 元素中定义。 <defs> 元素是定义的缩写，包含特殊元素（例如过滤器）的定义。

<filter> 元素用于定义 SVG 过滤器。 <filter> 元素有一个必需的 id 属性，用于标识过滤器。然后该图形指向要使用的过滤器。

SVG <feGaussianBlur>

示例1

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

fegaussianblur

这是 SVG 代码：

示例

<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>

亲自试一试 »

代码解释：

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

❮ 上一节下一节 ❯