最新的Web开发教程
 

SVG模糊效果


<DEFS>和<filter>

所有互联网SVG过滤器是一种内定义的<defs>元素。 在<defs>元素是短期的定义和含有特殊元素的定义(such as filters)

<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>
试一试»

Code explanation:

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