Erzeugung Kompassrose mit SVG

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

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.

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.
Sie können mit Sinus und Cosinus berechnet werden. ; α cos α sin α
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
Darstellung Kompassrose mit Stricheinteilung ( SVG scalierbar mousewheel) 10° 20° 30° 40° 50° 60° 70° 80° 90° 100° 110° 120° 130° 140° 150° 160° 170° 180° 190° 200° 210° 220° 230° 240° 250° 260° 270° 280° 290° 300° 310° 320° 330° 340° 350° 360° N NzO NNO NOzN NO NOzO ONO OzN O OzS OSO SOzO SO SOzS SSO SzO S SzW SSW SWzS SW SWzW WSW WzS W WzN WNW NWzW NW NWzN NNW NzW N Copyright ©2017 by Detlef Hahn Paul-Hessemer-Str. 68, 65428 Rüsselsheim
;  
close SVG-Source