In SVG Dokumenten gibt es 3 unterschiedliche Darstellungsmöglichkeiten
für Füllungen mit fill oder
Randlinien mit stroke:
- einfarbig (Paint)
- als Farbverlauf (Gradient)
- durch ein Muster ausgefüllt (Pattern)
Im letzten Kapitel wurde das Painting behandelt, in diesem Kapitel folgen die
Gradienten und die Pattern - die Farbverläufe und Muster.
Unter einem Farbverlauf versteht man den Übergang von einer Farbe in eine andere
entlang eines festgelegten Vektors.
Dabei wird zwischen geraden Gradienten und kreisförmigen
Gradienten unterschieden.
Farbverläufe werden durch Verwendung der jeweiligen Container-Elemente
linearGradient und radialGradient
im defs-Bereich einer SVG Grafik definiert.
Unter einem Muster versteht man eine immer währende Wiederholung einer Musterform.
So kann ein Objekt mit einem gleichartigen Muster gefüllt werden.
Das Container-Element pattern zur Festlegung eines Musters,
wird ebenfalls im defs-Container platziert.
Um die Verläufe oder Muster referenzieren zu können, müssen Sie diesen jeweils das
Attribut id mit
einem eindeutigen Bezeichner als Wert zuweisen.
Die so erzeugten Verläufe oder Muster werden dann
von Elementen und Objekten durch das
Attribut fill oder
stroke referenziert, z.B.:
<circle cx="50" cy="50" r="20" fill="url(#bezeichner-id)" />
|