Veröffentlicht am
Es gibt viele Seiten die das Thema behandeln. Um ein Verständniss für die einzelnen Elemente zu bekommen habe ich hier nochmal die Eigenschaften zusammengeschrieben.
<polygon>, <polyline>, <line> usw. lasse ich erstmal weg. Vielleicht komme ich später darauf zurück.
Der Pfad
Das d Attribut
Mit Pfaden können komplexe Formen, wie Linien oder Kurven, gezeichnet werden. Die Form eines Pfades wird mit "d" festgelegt.
<svg height="200px" width="100%"><path d="M 20,25 125,25" style="fill:none; stroke:#000; stroke-width:1px;"></path><path d="M 20,35 125,35 125,60 20,60 z" style="fill:lightblue; stroke:#000; stroke-width:1px;"></path><path d="M 20,25 125,25" /></svg>
Im ersten path Eelement wird eine Linie von x=20px, y=25px nach x=125px, y=25px gezeichenet. Die Einheit "px" wird nicht angegeben. Der Großbuchstabe "M" sagt aus, dass es sich um Absolute angaben handelt. Der zweite path wird mit einem "z" abgeschlossen. Dazu später mehr.
Hier das Ganze nochmal mit einem kleinen "m". Startpunkt ist immer noch x=20px, y=25px. Die nachfolgenden Werte werden jetzt relativ zum Startpunkt ausgewertet. Vereinfacht gesagt heißt das: Verschiebe x um 125px nach rechts und 25px nach unten. In absoluten Werten müsste d="M 20,25 145,50" geschrieben werden.
Kleines Rechenbeispiel
<path d="M 20,25 125,25" />
M: Startpunkt der Linie liegt genau auf den Koordinaten x = 20px, y = 25px, der Endpunkt genau auf den Koordinaten x = 125px, y = 25px. Eine gerade horizontale Linie wird gezeichnet. Hier muss nicht gerechnet werden.
<path d="m 20,25 125,25" />
m: Startpunkt der Linie liegt genau auf den Koordinaten x = 20px, y = 25px, wie bei "M", der Endpunkt
x = 20px + 125px = 145px
und
y = 25px + 25px = 50px.
Hier noch mal der gleiche Code wie oben mit dem Unterschied dass es jetzt relative Koordinaten sind.
<svg height="200px" width="100%"><path d="m 20,25 125,25" style="fill:none; stroke:#000; stroke-width:1px;"></path><path d="m 20,35 125,35 125,60 20,60 z" style="fill:lightblue; stroke:#000; stroke-width:1px;"></path></svg>
Linien mit H oder V
Linien benötigen immer einen Anfangspunkt und einen Endpunkt. Diese werden mit den x, y Koordinaten angegeben. Eine kürzere Schreibweise für horizontale oder vertikale Linien kann mit H oder V gezeichnet werden. Groß-/Kleinschreibung kann auch gemischt werden. Man sollte nur aufpassen das man nicht durcheinander kommt.
H oder h zeichnet eine vorizontale Linie.
V oder v zeichnet eine vertikale Linie.
<svg height="200px" width="100%"><path d="M 20,25 H 125" style="fill:none; stroke:#000; stroke-width:1px;"></path><path d="M 20,35 h 125" style="fill:none; stroke:#000; stroke-width:1px;"></path><path d="m 20,45 h 125" style="fill:none; stroke:#000; stroke-width:1px;"></path><path d="M 20,55 125,55" style="fill:none; stroke:#000; stroke-width:1px;"></path><path d="m 20,65 125,0" style="fill:none; stroke:#000; stroke-width:1px;"></path><path d="M 180,20 V 125" style="fill:none; stroke:#000; stroke-width:1px;"></path><path d="M 190,20 v 125" style="fill:none; stroke:#000; stroke-width:1px;"></path><path d="m 200,20 v 125" style="fill:none; stroke:#000; stroke-width:1px;"></path><path d="M 210,20 210,125" style="fill:none; stroke:#000; stroke-width:1px;"></path><path d="m 220,20 0,125" style="fill:none; stroke:#000; stroke-width:1px;"></path></svg>
Abschluss mit Z oder z
Z oder z (Close Path) kürzt den abschluß zum schließen einer Form ab.
<svg height="200px" width="100%"><path d="M 20,25 H 125 V 50 H 20 V 25" style="fill:lightblue; stroke:#000; stroke-width:1px;"></path><path d="M 20,75 H 125 V 100 H 20 Z" style="fill:red; stroke:#000; stroke-width:1px;"></path><path d="m 150,25 h 105 v 25 h -105 v -25" style="fill:lightblue; stroke:#000; stroke-width:1px;"></path><path d="m 150,75 h 105 v 25 h -105 z" style="fill:red; stroke:#000; stroke-width:1px;"></path></svg>
Bezier-Kurven
Bezier-Kurven sind etwas komplex. Begonnen wird die Kurve wie jede Linie mit x, y. Gefolgt von den Kontrollpunkten x1, y1 und x2, y2. Zum Abschluss noch der Endpunkt x, y.
<svg height="200px" width="100%"><circle cx="20" cy="25" r="5" style="fill:#f00;stroke:none;"></circle><circle cx="30" cy="55" r="5" style="fill:#f00;stroke:none;"></circle><path d="M 20,25 30,55" style="fill:none; stroke:#00f; stroke-width:1px;"></path><circle cx="120" cy="25" r="5" style="fill:#f00;stroke:none;"></circle><circle cx="110" cy="55" r="5" style="fill:#f00;stroke:none;"></circle><path d="M 120,25 110,55" style="fill:none; stroke:#00f; stroke-width:1px;"></path><path d="M 20,25 C 30,55 110,55 120,25" style="fill:lightblue; stroke:#000; stroke-width:1px;"></path></svg>
In diesem Beispiel habe ich die Bezier-Anfasser mit eingezeichnet. Somit wird es hoffentlich etwas anschaulicher.
Es gibt noch andere Arten eine Kurve zu zeichnen. Z.B. mit "S", "T", "Q" oder Bögen mit "A". Dies führt hier aber zu weit. Wer es genauer wissen möchte wird z.B. auf den Developer Seiten von Mozilla fündig.
https://developer.mozilla.org/de/docs/Web/SVG/Tutorial/Paths