SVG vervagingseffecten
<defs> en <filter>
Alle internet-SVG-filters worden gedefinieerd binnen een <defs>-element. Het <defs>-element is een afkorting voor definities en bevat definitie van speciale elementen (zoals filters).
Het element <filter> wordt gebruikt om een SVG-filter te definiëren. Het <filter>-element heeft een vereist id-attribuut dat het filter identificeert. De afbeelding wijst vervolgens naar het te gebruiken filter.
SVG <feGaussianBlur>
voorbeeld 1
Het element <feGaussianBlur> wordt gebruikt om vervagingseffecten te creëren:
Hier is de SVG-code:
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>
Code uitleg:
- Het id attribuut van het <filter> element definieert een unieke naam voor het filter
- Het vervagingseffect wordt gedefinieerd met het element <feGaussianBlur>
- Het deel in="SourceGraphic" definieert dat het effect voor het hele element wordt gemaakt
- Het kenmerk stdDeviation definieert de mate van vervaging
- Het filter attribuut van het <rect> element koppelt het element aan het "f1" filter