Erzeugung Kompassrose mit SVG

Eine SVG-Grafik hat Vorteile gegenüber einer Grafik mit Canvas.

Scale mit Mouesewheel Klick to change

Das Raster kann wesentlich feiner gewählt werden
Die Grafik kann scaliert werden und bleibt trotzdem sauber.
(gehen Sie mit der Maus in die Rose und scrollen sie mit dem Mausrad.)

Die Grafik wird begonnen indem der Vieport festgelegt wird.

Dabei wird die Ausdehnung mit Hilfe von width und height festgelegt.
Die kann absolut sein oder auch eine Prozentangabe, dann bezieht sich diese auf das Parentelement.
Hier wird ein quadratischer Bereich von 300 Pixel festgelegt.
Als nächster Parameter wird die Viewbox festgelegt.
Das ist keine Pixelangabe sondern ein Raster, das die Koordinaten innerhalb der Viewbox beschreibt.
viewBox="minx miny width height"
D.h. die linke, obere Ecke hat die Koordinate 0,0
Die rechte untere Ecke die Koordinate 300,300

Um einen Kreis zu zeichen, haben wir jetzt 2 Möglichkeiten.

Wir geben den Mittelpunkt unseres Kreise an :
<circle cx="150" cy="150" r="150" style="fill: #FFFFFF; stroke: #202020; stroke-width: 1px;" />
Das ist keine gute Lösung, wenn wir mehrere Elemente haben und später
evtl. die Koordinaten ändern müssen.
wir verschieben unser Koordinatensystem mit Hilfe eines
Gruppenelementes und transform
<g transform="translate(150,150)" >
Für alle Elemente die innerhalb dieser Gruppe definiert werden, liegt der
Ursprung jetzt auf(150,150)
Deshalb wird unser Kreis jetzt wie folgt definiert:
<circle cx="0" cy="0" r="150" style="fill: #FFFFFF; stroke: #202020; stroke-width: 1px;" />
Da der Rest unserer Elemente alle mit dem Kreis zu tun haben, benutzen wir
transform="translate(x,y)"
Hierdurch können wir alle Unterelemente verschieben, indem wir den übergeordneten transform ändern.
Andernfall müsste wir in jedem einzelnen Element die Koordinaten ändern.

Kommen wir nun zu der Kompassrose

Unsere Kompassrose kann 4,8,16 oder 32 Achsen haben. Wichtig ist, dass SVG in der Reihenfolge zeichnet
in der die Anweisungen erscheinen. Es gibt keinen z-index. Daraus folgt, dass unsere Nord/Süd Ost/West Achse zuletzt gezeichnet werden muss.

Der kleine Hilfskreis wurde nur zur Verdeutlichung eingezeichnet.
Die Umkehrpunkte der Polygone liegen direkt auf dem Kreis.
Deutlich zu sehen nur beim letzten Polygon.

Mit number_format wurden die folgenden Zeilen in ein Zahlenformat mit einer definierten Anzahl Nachkommastellen und einem Punkt als Dezimaltrennzeichen umgewandelt.

  $n=number_format($i,2);
  $y=number_format((sin(deg2rad(45)) *$r),6);
  $x=number_format((cos(deg2rad(45)) *$r),6);

Das wurde erforderlich, da das Programm lokal Zahlen mit Punkt als Trennzeichen lieferte, aber zum Server hochgeladen wurde ein Komma als Trennzeichen geliefert. Das führte dazu, daß rotate damit 2 Parameter z.B. rotate(22,5) statt rotate(22.5) hatte und damit natürlich nicht funktionierte.

Die Umkehrpunktekönnen mit Sinus und Cosinus berechnet werden.

Da sowohl die PHP-Funktion sin() als auch cos() das Bogenmass benötigt wird das mit dem PHP-Up deg2rad(winkel) berechnet.
Die Rückgabewerte müssen nur noch mit dem Radius multipliziert werden.

Diese Werte $x und $y werden als dritte Koordinate an das Polygon übergeben. Das Polygon wird automatisch geschlossen.
Die unterschiedlichen Füllfarben werden aus Variablen entnommen.
stroke: #CFCFCF; stroke-width: 1" sind nicht erforderlich, sondern nur vorhanden um optisch die Umkehrpunkte hervorzuheben.
.PHP_EOL; erzeugt einen Zeilenvorschub um den Quelltext lesbar zu halten.

Mit weiteren Schleifen können nun die anderen Achsen gezeichnet werden.
Viel Spass

Erzeugung Kompassrose mit SVG

Kommen wir nun zu der Kompassrose

SVG Sourcecode