<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"過濾器