Kurven und Kreise erstellen

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Neben Linien und Anfangspositionen gibt es natürlich auch noch andere Befehle, die Sie im d-Attribut eines Pfades verwenden können. Bspw. können Sie Bögen und damit Kreise, Halbkreise oder Ellipsen zeichnen. Das geschieht über den A-Befehl.

Hinweis:
Alternativ stehen aber auch verschiedene andere Befehle für Bézierkurven zur Verfügung. Eine vollständige Liste der für Kurven verfügbaren Befehle finden Sie unter Pfade richtig einsetzen.

Der A-Befehl hat folgende Parameter:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

Er bewirkt, dass eine Ellipse von der aktuelle Position zum Punkt x/y gezeichnet wird. Größe und Ausrichtung der Ellipse werden wie beim <ellipse>-Tag durch den Radius für X- und Y-Achse mit rx und ry bestimmt. Mit dem Parameter x-axis-rotation kann festgelegt werden, wie die Ellipse relativ zur X-Achse gedreht werden soll. Der Mittelpunkt der Ellipse wird automatisch, unter Zuhilfenahme der Parameter large-arc-flag und sweep-flag berechnet.

Beide Parameter können nur die Werte 0 und 1 annehmen. Sie entsprechen den booleschen Werten true und false. Ihre Bedeutung lässt sich am einfachsten an einer Grafik erklären. Wenn Sie mit dem A-Befehl einen Bogen zeichnen, wird der mit Hilfe einer gedachten Ellipse definiert. Es wird aber nur der Teil der Ellipse angezeigt, der zwischen dem Anfangs- und Endpunkt liegt. Würde man eine Ellipse aber durch eine Linie zwischen Anfangs- und Endpunkt trennen, hätte man zwei Teile, die nicht gleich groß sein müssen. Diese Teilung erfolgt in der folgenden Abbildung durch die mit "Achse" beschriftete gestrichtelte Linie. Auf beiden Seiten der Achse entsteht so ein Bogen, der jeweils zwischen Anfangs- und Endpunkt verläuft. Mit dem Parameter large-arc-flag können Sie nun bestimmen, ob Sie den größeren oder den kleineren Bogen der Ellipse zeichnen möchten.

Zeichnen eines Bogens mit Hilfe einer virtuellen Ellipse

Abbildung: Zeichnen eines Bogens mit Hilfe einer virtuellen Ellipse.

Hinweis:
large-arc lässt sich mit "großer Bogen" übersetzen. Der Begriff flag kennzeichnet nur die Tatsache, dass die möglichen Werte einen Schalter, hier 0 und 1 definieren.

Setzen Sie large-arc-flag auf 0 (=false), erhalten Sie den kleineren Bogen (in der Abbildung schwarz gestrichelt), setzen Sie ihn auf 1 (=true) erhalten Sie den größeren der beiden (in der Abbildung grau). Egal ob das längere oder kürzere Teilstück zurück gegeben wird, es stellt immer den unteren bzw. linken Teil der Achse dar. Der Mittelpunkt wird also immer so berechnet, dass er rechts oder oberhalb der Achse liegt. Um eine vollständige Ellipse aus zwei Teilstücken zu erhalten, muss dazu der Mittelpunkt verlagert werden.

Dazu dient der Parameter sweep-flag. Wenn Sie die Abbildung betrachten, wird Ihnen auffallen, dass bei identischen Daten, zur Definition der Ellipse (mit Ausnahme des Mittelpunktes, der ja berechnet wird) die Ellipse auch an der Achse gespiegelt werden könnte. Damit würde dann der Mittelpunkt der Ellipse unterhalb der Achse liegen. Alle anderen Daten wären gleich. Auch hier gäbe es wieder einen großen und einen kleinen Bogen. Nur würden diese beiden Teilstücke nun jeweils auf der anderen Seite der Achse liegen. Mit dem Parameter sweep-flag können Sie genau festlegen, ob die Ellipse an der Achse gespiegelt werden soll. Auch dazu stehen die Wert 0 und 1 zur Verfügung.

Das folgende Listing erstellt einmal das größere und das kleinere Teilstück einer Ellipse ohne Spiegelung dar. Darunter wird dann zusätzlich die Ellipse in zwei Teilstücken mit unterschiedlichen Farben und Linienstärken zusammengesetzt. Die Achse wird in beiden Ellipsen durch einen Pfad mit der L-Anweisung realisiert.

<?xml version="1.0" standalone="no"?>
...
<svg width="500" height="500">
  <path style="stroke:rgb(0,0,0);fill:none;stroke-width:2" d="M100 100 A30 20 0 0 0 90 130"/>
  <path style="stroke:rgb(222,222,222);fill:none;stroke-width:3" d="M100 100 A30 20 0 1 0 90 130"/>
  <path style="stroke:rgb(122,122,122);fill:none;stroke-width:1" d="M102 90 l-17 +60"/>
  <g transform="translate(100,100)">
    <path style="stroke:rgb(0,0,0);fill:none;stroke-width:2" d="M100 100 A30 20 0 1 0 90 130"/>
    <path style="stroke:rgb(222,222,222);fill:none;stroke-width:3" d="M100 100 A30 20 0 0 1 90 130"/>
    <path style="stroke:rgb(128,128,128);fill:none;stroke-width:1" d="M102 90 l-17 +60"/>
  </g>
</svg>

Mit der A-Anweisung erzeugt Pfade

Abbildung: Mit der A-Anweisung erzeugt Pfade.

In allen vier <path>-Tags mit der A-Anweisung werden die gleichen Werte für rx, ry, x, y und die Anfangsposition verwendet. Die Anfangsposition ist 100/100 und wird wieder mit dem M-Befehl definiert. Die Zielposition ist 90/130 und der Radius auf der X-Achse beträgt 30. Der Radius der Y-Achse 20 und eine Drehung erfolgt nicht, weil der Parameter x-axis-rotation den Wert 0 hat. Die Anweisungen unterscheiden sich lediglich in den beiden Parametern large-arc-flag und sweep-flag

Wenn Sie zusätzlich eine Drehung der Kurven erreichen möchten, können Sie für den Parameter x-axis-rotation einen Wert angeben, der die Gradzahl der Drehung bestimmt. Dies kann sowohl ein negativer als auch ein positiver Wert sein. Im folgenden Beispiel wurde eine Drehung von -35 Grad definiert.

<?xml version="1.0" standalone="no"?>
...
<svg width="500" height="500">
  <path style="stroke:rgb(0,0,0);fill:none;stroke-width:2" d="M100 100 A30 20 -35 1 1 90 130"/>
  <path style="stroke:rgb(122,122,122);fill:none;stroke-width:2" d="M100 100 A30 20 -35 0 0 90 130"/>
  <path style="stroke:rgb(122,122,122);fill:none;stroke-width:1" d="M102 90 l-17 +60"/>
</svg>

Wenn Sie diesen Code ausführen, wird die Ellipse und damit beide Pfade gedreht. In der folgenden Abbildung wird die ursprüngliche Lage der Ellipse durch die graue Füllung dargestellt, nur die beiden Teilstrecken und die Achse werden vom SVG-Code im vorstehenden Listing erzeugt.

Gedrehte Ellipse

Abbildung: Gedrehte Ellipse.

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de