<DEFS>和<filter>
所有互联网SVG过滤器是一种内定义的<defs>元素。 在<defs>元素是短期的定义和含有特殊元素的定义(such as filters) 。
该<filter>元素用于定义SVG滤镜。 该<filter>元素标识过滤器所需的id属性。 然后该图形指向过滤器使用。
SVG <feGaussianBlur>
例1
在<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"过滤器