Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  

12 Verlaeufe und Muster

12.1 Lineare Verlaeufe - das linearGradient-Element
12.2 Radiale Verlaeufe - das radialGradient-Element
12.3 Muster - das pattern-Element

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)" />




index  |  11.3  <<  |  Kapitel 12  |  >>  12.1   Lineare Verlaeufe - das linearGradient-Element