SVG slagschaduwen

<defs> en <filter>

Alle 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 <feOffset>

voorbeeld 1

Het element <feOffset> wordt gebruikt om slagschaduweffecten te creëren. Het idee is om een ​​SVG-afbeelding (afbeelding of element) te nemen en deze een klein beetje in het xy-vlak te verplaatsen.

Het eerste voorbeeld verschuift een rechthoek (met <feOffset>), en mengt vervolgens het origineel bovenop de offset-afbeelding (met <feBlend>):

Hier is de SVG-code:

Code uitleg:

• Het id attribuut van het <filter> element definieert een unieke naam voor het filter
• Het filter attribuut van het <rect> element koppelt het element aan het "f1" filter

Voorbeeld 2

Nu kan de offset-afbeelding worden vervaagd (met <feGaussianBlur>):

Hier is de SVG-code:

Code uitleg:

• Het kenmerk stdDeviation van het element <feGaussianBlur> definieert de mate van vervaging

Voorbeeld 3

Maak nu de schaduw zwart:

Hier is de SVG-code:

Code uitleg:

• Het in-attribuut van het <feOffset>-element wordt gewijzigd in "SourceAlpha", dat het alfakanaal gebruikt voor de vervaging in plaats van de hele RGBA-pixel

Voorbeeld 4

Behandel nu de schaduw als een kleur:

Hier is de SVG-code:

Code uitleg:

• Het <feColorMatrix>-filter wordt gebruikt om de kleuren in de offsetafbeelding dichter bij zwart te transformeren. De drie waarden van '0,2' in de matrix worden allemaal vermenigvuldigd met de rode, groene en blauwe kanalen. Door hun waarden te verlagen, komen de kleuren dichter bij zwart (zwart is 0)