SVG -vervaag-effekte
<defs> en <filter>
Alle internet SVG filters word gedefinieer binne 'n <defs> element. Die <defs>-element is kort vir definisies en bevat definisie van spesiale elemente (soos filters).
Die <filter>-element word gebruik om 'n SVG-filter te definieer. Die <filter>-element het 'n vereiste id-kenmerk wat die filter identifiseer. Die grafika wys dan na die filter om te gebruik.
SVG <feGaussianBlur>
Voorbeeld 1
Die <feGaussianBlur>-element word gebruik om vervaag-effekte te skep:
Hier is die SVG-kode:
Voorbeeld
<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>
Kode verduideliking:
- Die id-kenmerk van die <filter>-element definieer 'n unieke naam vir die filter
- Die vervaag effek word gedefinieer met die <feGaussianBlur> element
- Die in="SourceGraphic"-deel definieer dat die effek vir die hele element geskep word
- Die stdDeviation-kenmerk definieer die hoeveelheid vervaag
- Die filterkenmerk van die <rect>-element koppel die element aan die "f1"-filter