Abschnitt 2

Pfade, Gruppen und Transformationen

Pfade

Neben den Grundformen gibt es noch das sogenannte Pfad-Objekt <path>. Dieses ist sehr vielfältig einsetzbar und es lassen sich damit unter anderem alle Grundformen aus Abschnitt 1 auch als Pfad erzeugen. Ein Pfad ist durch ein einziges Attribut definiert.

d

Eine Liste von Punkten und anderen Informationen darüber, wie der Pfad gezeichnet werden soll.

Sie können sich einen Pfad als Anleitung für einen Zeichenstift vorstellen: Der Stift wird an eine Stelle gesetzt und dann Stück für Stück über das Papier geführt. Jeder Befehl beginnt mit einem Buchstaben. Ein grosser Buchstabe bedeutet dabei immer absolute Koordinaten, ein kleiner Buchstabe relative Koordinaten — also die Verschiebung gegenüber der aktuellen Position des Stiftes.

MoveTo und LineTo

Der MoveTo-Befehl erlaubt es, den virtuellen Zeichenstift an eine beliebige Position zu setzen.

M x,y

Setzt die Position des Stiftes auf die Position (x, y).

m x,y

Setzt die Position des Stiftes von der aktuellen Position aus x Einheiten nach rechts und y Einheiten nach unten. Man spricht hier von relativen Koordinaten.

Der Befehl LineTo erlaubt es, geradlinige Striche zu malen.

L x,y

Zeichnet von der aktuellen Position des Stiftes eine gerade Linie bis zum Punkt (x, y).

x,y

Eine Abkürzung für L x,y. Wird kein Steuerbefehl vor den Koordinaten eines Punktes angegeben, wird der letzte Befehl wiederholt; nach einem MoveTo ist das ein LineTo.

l dx,dy

Zeichnet von der aktuellen Position aus eine geradlinige Linie um dx Einheiten nach rechts und dy Einheiten nach unten. (relative Koordinaten)

H x und V y

Zeichnen eine waagrechte beziehungsweise senkrechte Linie. Es braucht nur eine Koordinate, die andere bleibt unverändert.

Pfad schliessen

Der Befehl closePath schliesst den aktuellen Pfad.

Z

Schliesst den aktuellen Pfad.

Quadratische Bézierkurven

Quadratische Bézierkurven sind Kurven, die durch zwei gegebene Punkte verlaufen und die durch einen Kontrollpunkt beeinflusst werden. Man kann sich das so vorstellen, dass die geradlinige Verbindung zwischen den gegebenen Punkten «in Richtung» des Kontrollpunkts gezogen wird. Wie dies mathematisch genau funktioniert, ist hier nicht unser Thema — Genaueres finden Sie zum Beispiel bei Martin Janecke, «Quadratische Funktion → Bézierkurve».

Q xc yc x y

Verbindet die aktuelle Position mit dem Punkt (x, y) mit einer quadratischen Bézierkurve mit dem Kontrollpunkt (xc, yc).

q xc yc x y

Analog mit relativen Koordinaten.

T x y

Verbindet die aktuelle Position mit dem Punkt (x, y) mit einer quadratischen Bézierkurve. Falls das letzte Stück des Pfades auch eine quadratische Bézierkurve ist, wird der letzte Kontrollpunkt an der aktuellen Position gespiegelt und das Resultat als Kontrollpunkt verwendet. Andernfalls wird die aktuelle Position selbst als Kontrollpunkt benutzt.

t x y

Analog mit relativen Koordinaten.

Der Befehl T ist genau das, was wir für eine «Wellenlinie» brauchen: Jedes neue Stück setzt die Kurve glatt fort, ohne dass wir den Kontrollpunkt erneut ausrechnen müssen.

Pierre Bézier (1910–1999) entwickelte diese Kurven bei Renault für den Autobau.

Kubische Bézierkurven

Neben den quadratischen gibt es auch kubische Bézierkurven. Diese funktionieren ähnlich, verwenden aber zwei Kontrollpunkte — einen für jedes Ende der Kurve. Damit lassen sich Formen zeichnen, die sich unterwegs in die andere Richtung krümmen, was mit einer quadratischen Kurve nicht möglich ist.

C x1 y1 x2 y2 x y

Verbindet die aktuelle Position mit dem Punkt (x, y). Dabei ist (x1, y1) der Kontrollpunkt für den Anfang und (x2, y2) derjenige für das Ende der Kurve.

S x2 y2 x y

Wie C, aber der erste Kontrollpunkt wird gespiegelt — analog zu T bei den quadratischen Kurven.

c und s

Analog mit relativen Koordinaten.

Elliptische Bögen

Mit dem Befehl A (beziehungsweise a) lassen sich Kreis- und Ellipsenbögen zeichnen. Das ist der Befehl mit den meisten Parametern, denn durch zwei Punkte und zwei Radien sind immer vier verschiedene Bögen möglich; zwei Schalter wählen den gewünschten aus.

A rx ry phi lf sf x y

Zeichnet von der aktuellen Position aus einen elliptischen Bogen bis zum Punkt (x, y).

rx

Die Länge der horizontalen Halbachse.

ry

Die Länge der vertikalen Halbachse.

phi

Der Winkel, um den die Ellipse gedreht ist. Für einen Kreisbogen spielt er keine Rolle, wir setzen ihn dann auf 0.

lf

Das large-arc-flag. Mit 1 wird der längere der beiden möglichen Bögen gezeichnet, mit 0 der kürzere.

sf

Das sweep-flag. Es bestimmt, auf welcher Seite der Verbindungslinie der Bogen liegt.

Ein häufiger Anwendungsfall ist ein Kreissektor, also ein «Tortenstück»: Vom Mittelpunkt mit L an den Rand, mit A entlang des Kreises und mit Z zurück zum Mittelpunkt.

Übersicht über die Pfadbefehle. Der kleine Buchstabe bedeutet jeweils dasselbe mit relativen Koordinaten.

Gruppieren und Transformieren

Sobald eine Zeichnung aus mehr als ein paar Formen besteht, möchten wir mehrere Formen gemeinsam behandeln. Dafür gibt es das <g>-Tag (für group). Attribute, die wir an der Gruppe setzen, gelten für alle Formen darin — wir müssen sie also nur einmal schreiben. Setzt eine Form das Attribut selbst, gewinnt die Form.

Der eigentliche Grund für Gruppen ist aber das Attribut transform. Damit verschieben, drehen und skalieren wir eine Form oder eine ganze Gruppe, ohne alle Koordinaten neu ausrechnen zu müssen:

translate(dx, dy)

Verschiebt um dx nach rechts und dy nach unten.

rotate(winkel)

Dreht um den Ursprung (0, 0). Der Winkel wird in Grad angegeben, und weil die y-Achse nach unten zeigt, dreht ein positiver Winkel im Uhrzeigersinn. Mit rotate(winkel, cx, cy) drehen wir stattdessen um den Punkt (cx, cy).

scale(faktor)

Streckt vom Ursprung aus. Mit scale(fx, fy) können wir in x- und y-Richtung unterschiedlich strecken.

Einzelne Elemente benennen und nutzen

Bilder bestehen oft aus mehreren gleichen oder mindestens ähnlichen Teilen. Es ist daher sinnvoll, wenn wir gewisse Objekte mit einem Namen versehen und diese dann wiederverwenden.

Wir können dazu, wie in HTML, einzelne Objekte mit einer ID versehen und diese dann wieder verwenden. Dafür verwenden wir das Tag <use>.

Als Beispiel ist hier eine entsprechende Variante der Grafik von Listing 6.

In den meisten Fällen ist es jedoch ratsam, zunächst einen Prototyp des betreffenden Objektes zu erstellen, welcher anschliessend in einem zweiten Schritt gezeichnet wird, sobald das Objekt aufgerufen und mit Attributen ergänzt wird.

Für die Umsetzung der obigen Anforderungen ist das <defs>-Tag erforderlich. Dieses ermöglicht die Definition von Objekten sowie deren Benennung, wobei eine direkte Zeichnung erst nach Aufruf der Objekte mittels des <use>-Tags erfolgt. Bei Aufruf können zudem zusätzliche Optionen angegeben werden.

Ein <use>-Tag versteht neben transform auch die Attribute x und y. Diese verschieben die Kopie — was Sie sich als abgekürztes translate merken können.

Clipping

Clipping ist eine Methode, bei der man einen Teil des Bildes zeigt und den Rest versteckt. Diese Methode wird oft bei Profilbildern verwendet. Dabei wird das Bild mit einem Kreis überlagert. Nur der Teil, der innerhalb des Kreises liegt, wird angezeigt. Man sagt dazu auch masking. Das wird aber mehr bei Rastergrafiken verwendet, weil die Maske dort sagt, welche Pixel gezeichnet werden und welche nicht. Bei Vektorgrafiken wird geometrisch bestimmt, was gezeichnet wird. Deshalb spricht man dort von Clipping.

Um dies zu bewerkstelligen, nutzen wir das <clipPath>-Tag und versehen es mit einer ID. Diese ID geben wir anschliessend dem Objekt, das beschnitten werden soll, im Attribut clip-path mit — und zwar in der Form clip-path="url(#meine-id)".

Übungen