SVG-Koordinatensystem

Wie viele Computer-Drawings-Koordinatensysteme verwendet SVG auch das Rasterkoordinatensystem. Dieses Koordinatensystem hat folgende Merkmale: Der Ursprung des Koordinatensystems ist der linke obere Ecke (0,0), die positive Richtung der X-Achse ist nach rechts, beginnend am Punkt 0,0, x nimmt zu. Die positive Richtung der Y-Achse ist nach unten, beginnend am Punkt 0,0, y nimmt zu. Die Koordinaten werden in Pixeln gemessen

Das Koordinatensystem von SVG (und den meisten anderen Computergrafiken) ist etwas anders als das Koordinatensystem von Mathematik, Graphen usw.

　Mathematik/Kartesisches Koordinatensystem

In der kartesischen Koordinatensystem, ist der Punkt x=0, y=0 im unteren linken Ecke des Graphen. Mit zunehmendem x bewegt sich der Punkt im Koordinatensystem nach rechts. Wenn x verringert wird, bewegt sich der Punkt im Koordinatensystem nach links. Mit zunehmendem y bewegt sich der Punkt im Koordinatensystem nach oben. Wenn y verringert wird, bewegt sich der Punkt im Koordinatensystem nach unten.

Dies ist eine Darstellung des gewöhnlichen Graphen-Koordinatensystems, wobei 0,0 im unteren linken Ecke ist:

SVG-Koordinatensystem

In der SVG-Koordinatensystem, ist der Punkt x=0, y=0 im linken oberen Ecke. Daher ist die y-Achse im Vergleich zum gewöhnlichen Graphen-Koordinatensystem umgekehrt. Mit zunehmendem y in SVG bewegen sich Punkte, Formen usw. nach unten, anstatt nach oben.

Dies ist eine Darstellung des SVG-Koordinatensystems, wobei 0,0 im linken oberen Ecke ist:

Koordinatensystem-Einheit

können Sie die SVG-Koordinatensystem festlegen1Dies ist die Einheit, die einer Einheit entspricht. Sie können diese Aktion an jedem Ort ausführen, an dem Sie Koordinaten (x und y Position, width und height usw.) angeben können. Sie können nach dem Wert die Einheit angeben, zum Beispiel10cm oder125mm.

Wenn nach dem Koordinatenwert keine Einheit angegeben ist, wird angenommen, dass die Einheit Pixel (px) ist.

Dies ist die Liste der Einheiten, die mit SVG-Elementen verwendet werden können:

<svg> in width und height Attributen auf der Einheit, die im Element eingestellt wird, beeinflusst nur das <svg> Element (Viewport). Die Formen im <svg>-Element müssen ihre eigenen Einheiten festlegen. Ebenso ist der Standardmaßstab Pixel, wenn keine Einheit angegeben ist.