Bitte warten...

SVG: Komplexe Pfade

Polylinien

► W3C-Empfehlung: <polyline>

Polylinien sind offene Pfade, die aus einer beliebigen Kette von Linien bestehen. Ihre Enden gelten immer als unverbunden, selbst wenn sie sich am gleichen Punkt befinden. Sie werden durch das <polyline>-Tag definiert. In dem obligatorischen Attribut points werden die Eckpunkte der Linien angegeben, wobei der erste Wert des Zahlenpaares die x-Position und der zweite Wert die y-Position angibt. Die Zahlenpaare werden durch Komma von einander getrennt.

Code kopieren
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' baseProfile='full' width='350px' height='180px'>
  <style type='text/css'>
    #poly1 { stroke:red; stroke-width:6px; fill:green; stroke-miterlimit:1.9; }
    #poly2 { stroke:blue; stroke-width:3px; stroke-miterlimit:20; fill:cyan; fill-rule:evenodd; }
    #poly3 { stroke:yellow; stroke-width:3px; stroke-dasharray:10,5; fill:none; }
  </style>
  <polyline id='poly1' points='15 35, 20 20, 40 10, 60 60, 80 10, 100 70, 102 20, 130 60, 150 20, 170 40' />
  <polyline id='poly2' points='60 75, 90 150, 18 104, 102 104, 30 150' />
  <polyline id='poly3' points='230 30, 280 30, 280 70, 200 70, 200 100, 220 100, 220 140, 250 140' />
</svg>

Wird eine Füllfarbe angegeben, so wird das gesamte Objekt zwischen den beiden Endpunkten mit dieser Farbe gefüllt. Über das Attribut fill-rule wird die Art der Füllung bestimmt. Der Wert nonzero ist hier die Vorgabe und bewirkt eine vollständige Füllung des Objekts, während bei Verwendung des Wertes evenodd jene Bereiche nicht gefüllt werden, die sich aus einer Überschneidung der Linien ergeben (s. das sternförmige Objekt im Beispiel).

Bei der roten Polylinie des Beispiels sieht man, wie die äußeren Ecken teilweise gekappt werden, wenn sie einen bestimmten Winkel unterschreiten, wenn für das Attribut stroke-linejoin der Wert miter angegeben wurde, bzw. dieses Attribut nicht bestimmt wurde. Der Grenzwert für den Wechsel der Eckendarstellung von miter zu bevel kann über das Attribut stroke-miterlimit eingestellt werden, wobei man diesen Wert in der Praxis durch Ausprobieren ermitteln muss, da sich der mathematische Zusammenhang nicht unbedingt intuitiv erschließt. Weitere Informationen hierzu findet man in der W3C-Empfehlung.

SVG-Beispiel für Polylinien SVG-Beispiel für Polylinien

Polygone

► W3C-Empfehlung: <polygon>

Polygone verhalten sich im Prinzip wie Polylinien mit dem einzigen Unterschied, dass es sich dabei immer um einen automatisch geschlossenen Pfad handelt. Die Enden werden also immer verbunden, selbst wenn sie sich nicht an dem gleichen Punkt befinden. Polygone werden durch das <polygon>-Tag definiert.

Code kopieren
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' baseProfile='full' width='350px' height='180px'>
  <style type='text/css'>
    #poly1 { stroke:red; stroke-width:6px; fill:green; stroke-miterlimit:1.9; }
    #poly2 { stroke:blue; stroke-width:3px; stroke-miterlimit:20; fill:cyan; fill-rule:evenodd; }
    #poly3 { stroke:yellow; stroke-width:3px; stroke-dasharray:10,5; fill:none; }
  </style>
  <polygon id='poly1' points='15 35, 20 20, 40 10, 60 60, 80 10, 100 70, 102 20, 130 60, 150 20, 170 40' />
  <polygon id='poly2' points='60 75, 90 150, 18 104, 102 104, 30 150' />
  <polygon id='poly3' points='230 30, 280 30, 280 70, 200 70, 200 100, 220 100, 220 140, 250 140' />
</svg>

Dieses Beispiel unterscheidet sich von dem Beispiel zu den Polylinien lediglich durch die Verwendung von <polygon>-Tags anstelle von <polyline>-Tags. Alle anderen Parameter sind indentisch, um den Unterschied zu verdeutlichen.

SVG-Beispiel für Polygone SVG-Beispiel für Polygone

Beliebige Pfade

► W3C-Empfehlung: <path>

Schließlich ist es in SVG auch möglich, Pfade zu erstellen, die aus einer Kombination von Kurven und Linien bestehen. Dazu wird das <path>-Tag für beliebige Pfade verwendet. Mit diesem Tag lassen sich prinzipiell auch alle oben beschriebenen Objekte erstellen, wobei es in der Regel ökonomischer ist, für gewöhnliche Formen auf die speziellen Tags zurückzugreifen.

Das obligatorische Attribut von <path> ist d, in dem sämtliche Parameter des Pfades abgelegt sind. Die Werte dieses Attributs bestehen in der Regel aus einem Kommando, das den Typ der zu zeichnenden Linie bestimmt, und den Zahlenwerten, durch welche die zu zeichnende Linie definiert wird. Es existieren die folgenden Kommandos:

M, m - Beginn eines Pfades
H, h - horizontale Linie
V, v - vertikale Linie
L, l - beliebige Linie
A, a - Ellipsenbogen
Q, q - quadratische Bézier-Kurve
T, t - Fortsetzung einer quadratischen Bézier-Kurve
C, c - kubische Bézier-Kurve
S, s - Fortsetzung einer kubischen Bézier-Kurve
Z, z - Ende eines Pfades

Werden die Kommandos in Großbuchstaben geschrieben, so werden die folgenden Werte als absolute Werte innerhalb des Koordinatensystems interpretiert. Werden sie in Kleinbuchstaben geschrieben, so gelten sie relativ zum letzten Bezugspunkt des Pfades.

Linien

► W3C-Empfehlung: moveto lineto closepath

Über die Kommandos H, V und L ist es möglich, einfache Linien zu zeichnen. Die Werteliste des folgenden Beispiels ist so zu lesen:

M 20 20 - Der Pfad beginnt an Position x=20 und y=20.
h 100 - Zeichne eine horizontale Linie 100 Pixel nach rechts.
v 40 - Zeichne eine vertikale Linie 40 Pixel nach unten.
l 100 50 - Zeichne eine diagonale Linie 100 Pixel nach rechts und 50 Pixel nach unten.
v -30 - Zeichne eine vertikale Linie 30 Pixel nach oben.

Der zweite Pfad enthält zusätzlich das Kommando Z, mit dem dieser Pfad wieder geschlossen wird.
Prinzipiell könnte man diese Formen natürlich auch als Polylinie bzw. Polygon ausführen.

Code kopieren
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' baseProfile='full' width='350px' height='180px'>
  <style type='text/css'>
    #group1 { stroke:red; stroke-width:2px; }
  </style>
  <g id='group1'>
    <path d='M 20 20 h 100 v 40 l 100 50 v -30' />
    <path d='M 20 70 h 100 v 40 l 100 50 v -30 Z' />
  </g>
</svg>

► W3C-Empfehlung: <g>

Die grafische Gestaltung der Pfade erfolgt in diesem Beispiel über das übergeordnete Element <g> (group). Dieses Element dient der Zusammenfassung einer Gruppe von Objekten, denen z. B. mit Hilfe von CSS bestimmte Eigenschaften zugewiesen werden sollen, wie in diesem Fall eine rote Strichfarbe und eine Strichstärke von 2 Pixeln. Es entspricht ungefähr dem <div>- oder <span>-Element von HTML.

SVG-Beispiel für beliebige Pfade SVG-Beispiel für beliebige Pfade

Ellipsenbogen

► W3C-Empfehlung: Elliptical arc

Ein Ellipsenbogen wird durch das Kommando A erzeugt. Dieses Kommando benötigt vier Parameter:

• Wertepaar x-Radius, y-Radius
• Drehung der Ellipse in Grad
• Wertepaar large-arc-flag, sweep-flag
• Wertepaar x-Koordinate, y-Koordinate des Zielpunktes

Code kopieren
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' baseProfile='full' width='350px' height='180px'>
  <style type='text/css'>
    #group1 { stroke:red; stroke-width:2px; }
  </style>
  <g id='group1'>
    <path d='M  20  80 a 25,35 -45 0,1 50,0' style='fill:blue;' />
    <path d='M 120  80 a 25,35 -45 1,1 50,0' style='fill:orange;' />
    <path d='M  20 100 a 25,35 -45 1,0 50,0' style='fill:green;' />
    <path d='M 120 100 a 25,35 -45 0,0 50,0' style='fill:magenta;' />
  </g>
</svg>

Im Beispiel wird den Pfaden in allen vier Fällen die gleiche Ellipse zugrunde gelegt. Sie hat einen x-Radius von 25px, einen y-Radius von 35px, und sie ist um 45° nach links gedreht. Der Pfad endet 50px nach rechts und 0px nach unten.
Die Pfade unterscheiden sich lediglich in den beiden Flags, die entweder den Wert 1 (ja oder TRUE) oder 0 (nein oder FALSE) besitzen können. Das erste large-arc-flag gibt an, ob der größere Teilbogen der Ellipse gezeichnet werden soll. Das zweite sweep-flag gibt an, ob der Pfad im Uhrzeigersinn der Ellipse folgen soll.

SVG-Beispiel für Ellipsenbogen SVG-Beispiel für Ellipsenbogen

Bézier-Kurven

► W3C-Empfehlung: Cubic Bézier curve Quadratic Bézier curve

Bézier-Kurven werden durch die Kommandos Q (für quadratische Bézier-Kurven mit einem Kontrollpunkt) bzw. C (für kubische Bézier-Kurven mit zwei Kontrollpunkten) erzeugt. Fortsetzungen dieser Kurven werden mit den Kommandos T (bei quadratischen Bézier-Kurven) bzw. S (bei kubischen Bézier-Kurven) erzeugt. Die benötigten Parameter sind:

Q
• Wertepaar x-Koordinate, y-Koordinate des Kontrollpunktes
• Wertepaar x-Koordinate, y-Koordinate des Endpunktes

T
• Wertepaar x-Koordinate, y-Koordinate des Endpunktes

C
• Wertepaar x-Koordinate, y-Koordinate des ersten Kontrollpunktes
• Wertepaar x-Koordinate, y-Koordinate des zweiten Kontrollpunktes
• Wertepaar x-Koordinate, y-Koordinate des Endpunktes

S
• Wertepaar x-Koordinate, y-Koordinate des Kontrollpunktes
• Wertepaar x-Koordinate, y-Koordinate des Endpunktes

In beiden folgenden Beispielen verläuft der erste Abschnitt der Kurve 100px nach rechts und 0px nach unten. Der zweite Abschnitt verläuft 30px nach rechts und 20px nach unten.

Im ersten Beispiel (quadratische Kurve) liegt der Kontrollpunkt 40px rechts und 50px unterhalb des Ausganspunktes 20,50.

Code kopieren
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' baseProfile='full' width='350px' height='180px'>
  <style type='text/css'>
    #group1 { stroke:red; stroke-width:2px; }
  </style>
  <g id='group1'>
    <path d='M 20 50 q 40,50 100,0 t 30,20' style='fill:cyan;' />
    <circle cx='20' cy='50' r='2' />
    <circle cx='120' cy='50' r='2' />
    <circle cx='150' cy='70' r='2' />
    <circle cx='60' cy='100' r='2' style='stroke:cyan;' />
    <path d='M 20 50 l 40 50 l 60 -50' style='stroke:grey;stroke-width:1px;fill:none;' />
    
    <path d='M 20 120 c 50,50 90,-20 100,0 s 50,0 30,20' style='fill:orange;' />
    <circle cx='20' cy='120' r='2' />
    <circle cx='120' cy='120' r='2' />
    <circle cx='150' cy='140' r='2' />
    <circle cx='70' cy='170' r='2' style='stroke:orange;' />
    <circle cx='110' cy='100' r='2' style='stroke:orange;' />
    <circle cx='170' cy='120' r='2' style='stroke:orange;' />
    <line x1='70' y1='170' x2='20' y2='120' style='stroke:grey;stroke-width:1px;fill:none;' />
    <line x1='110' y1='100' x2='120' y2='120' style='stroke:grey;stroke-width:1px;fill:none;' />
    <line x1='170' y1='120' x2='150' y2='140' style='stroke:grey;stroke-width:1px;fill:none;' />
  </g>
</svg>

Im zweiten Beispiel (kubische Kurve) liegt der erste Kontrollpunkt 50px rechts und 50px unterhalb des Ausgangspunktes 20,120. Der zweite Kontrollpunkt liegt 90px rechts und 20px oberhalb des Ausgangspunktes 20,120, bezieht sich aber auf den Endpunkt des ersten Kurvenabschnitts (120,120). Der Kontrollpunkt der Kurvenfortsetzung (dritter Kontrollpunkt) befindet sich 50px rechts und 0px unterhalb des Ausgangspunktes der Fortsetzung (= Endpunkt des ersten Kurvenabschnitts).

SVG-Beispiel für Bézier-Kurven SVG-Beispiel für Bézier-Kurven

Unterbrochene Pfade

Wird innerhalb eines Pfades das Kommando M erneut angewendet, so wird der Verlauf des Pfades am letzten Bezugspunkt unterbrochen und an dem durch M festgelegten Punkt fortgesetzt. In dieser Weise lassen sich unterbrochene Pfade erzeugen.

Code kopieren
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' baseProfile='full' width='350px' height='180px'>
  <style type='text/css'>
    #group1 { stroke:red; stroke-width:2px; }
  </style>
  <g id='group1'>
    <path d='M  60 40 a 15,25 0 0,0 0,90   m 20 -90 a 15,25 0 0,1 0,90' style='fill:cyan;' />
    <path d='M 160 40 a 15,25 0 0,0 0,90 z m 20   0 a 15,25 0 0,1 0,90' style='fill:yellow;' />
    <path d='M 260 40 a 15,25 0 0,0 0,90   l 20 -90 a 15,25 0 0,1 0,90' style='fill:orange;' />
  </g>
</svg>

Wird vor dem Setzen eines Fortsetzungspunktes das Kommando Z angewendet, so wird der erste Pfadabschnitt zuvor geschlossen. Allerdings bewirkt das Schließen auch einen neuen Endpunkt des ersten Pfadabschnitts. Eine Füllung wird jeweils für die Teilpfade vorgenommen, aber nicht für den gesamten Pfad wie im dritten Beispiel, wo der Pfad nicht unterbrochen ist.

SVG-Beispiel für unterbrochene Pfade SVG-Beispiel für unterbrochene Pfade