Die SVG 2D -Einführung von HTML5 - Übersicht über das Windows -Koordinatensystem und das Benutzerkoordinatensystem und die Transformation

Autor：Eve Cole Aktualisierungszeit：2025-04-06 02:00:03

Koordinatensystem

In SVG gibt es zwei Koordinatensysteme: das Fensterkoordinatensystem und das Benutzerkoordinatensystem. Standardmäßig entsprechen die Punkte des Benutzerkoordinatensystems und des Fensterkoordinatensystems einzeln, die beide der Ursprung in der oberen linken Ecke des Fensters sind, die x-Achse nach rechts horizontal und die y-Achse nach unten senkrecht. Wie in der Abbildung unten gezeigt:

Die Fensterposition des SVG wird im Allgemeinen durch CSS angegeben, und die Größe wird durch die Attributbreite und Höhe des SVG -Elements festgelegt. Wenn das SVG jedoch in einem eingebetteten Objekt (z. B. einem Objektelement oder einem anderen SVG -Element) gespeichert ist und das Dokument, das das SVG enthält, mit CSS oder XSL formatiert ist und die CSS oder andere angegebene Größenwerte dieser peripheren Objekte die Fenstergröße bereits berechnen können, dann wird die Größe des peripheralen Objekts verwendet.

Hier müssen wir die Konzepte von Fenster, Fensterkoordinatensystemen und Benutzerkoordinatensystemen unterscheiden:

Fenster : Bezieht sich auf den sichtbaren rechteckigen Bereich auf der Webseite mit begrenzter Länge und Breite, und dieser Bereich hängt im Allgemeinen mit der Größe des peripheren Objekts zusammen.

Fensterkoordinatensystem : im Wesentlichen ein Koordinatensystem mit Herkunft, X-Achse und Y-Achse; und es erstreckt sich unendlich in beide Richtungen. Standardmäßig befindet sich der Ursprung in der oberen linken Ecke des Fensters, die x-Achse ist horizontal rechts und die y-Achse ist senkrecht nach unten. Die Punkte in diesem Koordinatensystem können transformiert werden.

Benutzerkoordinatensystem : Im Wesentlichen ein Koordinatensystem mit Herkunft, X-Achse und Y-Achse; und es erstreckt sich unendlich in beide Richtungen. Standardmäßig befindet sich der Ursprung in der oberen linken Ecke des Fensters, die x-Achse ist horizontal rechts und die y-Achse ist senkrecht nach unten. Die Punkte in diesem Koordinatensystem können transformiert werden.

Standardmäßig überlappen sich das Fensterkoordinatensystem und das Benutzerkoordinatensystem, aber es ist hier zu beachten, dass das Fensterkoordinatensystem zum Element gehört, das das Fenster erstellt. Nachdem das Fensterkoordinatensystem ermittelt wurde, wird der Koordinatenton des gesamten Fensters bestimmt. Das Benutzerkoordinatensystem gehört jedoch zu jedem grafischen Element. Solange die Grafik eine Koordinatentransformation hat, wird ein neues Benutzerkoordinatensystem erstellt. Alle Koordinaten und Dimensionen in diesem Element verwenden dieses neue Benutzerkoordinatensystem.

Um es einfach auszudrücken: Das Fensterkoordinatensystem beschreibt das anfängliche Koordinatenprofil aller Elemente im Fenster, und das Benutzerkoordinatensystem beschreibt das Koordinatenprofil jedes Elements. Standardmäßig verwenden alle Elemente das Standard -Benutzerkoordinatensystem, das mit dem Fensterkoordinatensystem zusammenfällt.

Raumtransformation koordinieren

Lassen Sie uns die Transformation von Canvas -Benutzerkoordinaten überprüfen, die durch Übersetzung, Skalierung und Rotationsfunktionen implementiert werden. Jede Transformation wirkt sich später an den Figuren aus, es sei denn, die Transformation wird erneut durchgeführt, was das Konzept des aktuellen Benutzerkoordinatensystems ist. Canvas hat nur ein Benutzerkoordinatensystem.

In SVG ist die Situation völlig anders. Als Vektorgrafelelement kann SVG selbst im Wesentlichen als Benutzerkoordinatensysteme angesehen werden. Beide Koordinatenräume von SVG können transformiert werden: Transformation der Fensterräume und Benutzerraumtransformation. Die Fensterraumtransformation wird durch die Eigenschaftsansichtsbox der zugehörigen Elemente gesteuert (diese Elemente erstellen neue Fenster). Die Benutzerraumtransformation wird durch das Transformationsattribut des Graphelements gesteuert. Die Fensterspeichertransformation wird auf das entsprechende gesamte Fenster angewendet, und die Transformation der Benutzerraum wird auf das aktuelle Element und seine untergeordneten Elemente angewendet.

Fenstertransformation - Eigenschaft anzeigen

Alle Elemente, die ein Fenster erstellen können (siehe den nächsten Abschnitt) sowie Marker-, Muster- und Ansichtselemente, haben ein Ansichtbox -Attribut.

Das Format des ViewBox -Attributwerts lautet (x0, y0, u_width, u_height), und jeder Wert wird durch ein Komma oder Speicherplatz getrennt. Sie bestimmen gemeinsam den Bereich, der vom Fenster angezeigt wird: Die Koordinaten der oberen linken Ecke des Fensters werden auf (x0, y0) eingestellt, die Breite des Fensters ist auf U_WIDTH gesetzt, und die Höhe ist u_height; Diese Transformation funktioniert für das gesamte Fenster.

Verwechseln Sie hier nicht: Die Größe und Position des Fensters wurden durch das Element bestimmt, das das Fenster und die peripheren Elemente erstellt (zum Beispiel das von dem äußersten SVG -Element erstellte Fenster wird durch CSS, Breite und Höhe bestimmt). Die Viewbox hier soll diesen festgelegten Bereich tatsächlich festlegen, um anzuzeigen, welcher Teil des Fensterkoordinatensystems.

Die Einstellung der Viewbox enthält tatsächlich zwei Transformationen: Zoom und Übersetzung des Fensterraums.

Die Berechnung der Transformation ist ebenfalls sehr einfach: Nehmen Sie das Ansichtsfenster des äußersten SVG -Elements als Beispiel, vorausgesetzt, die Breite und Länge von SVG sind auf Breite, Höhe und die Einstellung der Viewbox festgelegt (x0, y0, u_width, u_height). Dann sind die Waagen der Breite und der Höhe der gezeichneten Abbildung: Breite/U_WIDTH, Höhe/U_Height. Die Koordinaten der oberen linken Ecke des Fensters sind auf (x0, y0) eingestellt.

Erleben Sie die Unterschiede in den Ergebnissen der folgenden Codes:

</svg>

In der Abbildung im obigen Beispiel können Sie grüne und rote Rechtecke sehen. In diesem Fall entsprechen die Punkte im Fensterkoordinatensystem immer noch den Punkten im Fenster, was ebenfalls die Standardeinstellung ist.

</svg>

In der Abbildung im obigen Beispiel können Sie nur das grüne Rechteck sehen, und das grüne Rechteck wird auf dem Bildschirm mit 200*200 Pixel angezeigt. Zu diesem Zeitpunkt sind die Koordinatenpunkte nicht mehr nach dem anderen und die Zahl ist vergrößert.

</svg>

In der im obigen Beispiel gezeichneten Abbildung werden die Einheiten des Fensterkoordinatensystems reduziert, sodass beide Rechtecke reduziert werden.

In der täglichen Arbeit müssen wir häufig eine Reihe von Grafiken erledigen, um sie an seinen übergeordneten Container anzupassen. Wir können dies erreichen, indem wir die Ansichtbox -Eigenschaft festlegen.

Elemente , die neue Fenster erstellen können

Wir können jederzeit Fenster nisten. Beim Erstellen eines neuen Fensters wird ein neues Fensterkoordinatensystem und ein Benutzerkoordinatensystem erstellt, und natürlich wird ein neues erstellt, einschließlich des Ausschnittpfads. Im Folgenden finden Sie eine Liste von Elementen, mit denen ein neues Fenster erstellt werden kann:

SVG : SVG unterstützt das Nisten.

Symbol : Erstellen Sie ein neues Fenster, wenn Sie durch das Element verwenden.

Bild : Ein neues Fenster wird erstellt, wenn auf ein SVG -Element verwiesen wird.

ForeignObject : Erstellen Sie ein neues Fenster, um das Objekt im Inneren zu rendern.

Halten Sie die Skalierungs-Skalierungs-Präparation des Scaling-Eigenschaft

Manchmal, insbesondere bei der Verwendung von ViewBox, erwarten wir, dass die Grafiken das gesamte Fenster einnehmen, anstatt in denselben Anteil in beide Richtungen zu skalieren. Manchmal hoffen wir, dass die beiden Richtungen der Figur in festem Maßstab skaliert sind. Verwenden Sie das Attribut PreserveSpectratio, um dies zu erreichen, um dies zu kontrollieren.

Diese Eigenschaft ist alles Elemente, die ein neues Fenster sowie Bild-, Marker-, Muster- und Ansichtselemente erstellen können. Darüber hinaus funktioniert das Attribut für PreserveSpectratio erst, nachdem die Viewbox auf das Element eingestellt ist. Wenn die Viewbox nicht festgelegt ist, wird die Eigenschaft preserveSpectratio ignoriert.

Die Syntax des Attributs lautet wie folgt: PreserveSpectratio = [Defer] <Align> [<MeetorsLice>]

Beachten Sie, dass die 3 Parameter durch Leerzeichen getrennt werden müssen.

Verschiebung : Optionaler Parameter, nur für Bildelemente gültig. Wenn der Wert des Attributs des PreserveSpectratio im Bildelement mit Aufschub beginnt, bedeutet dies, dass das Bildelement das Skalierungsverhältnis des referenzierten Bildes verwendet. Wenn das referenzierte Bild kein Skalierungsverhältnis hat, wird Aufschub ignoriert. Alle anderen Elemente ignorieren diese Zeichenfolge.

Ausrichtung : Dieser Parameter bestimmt die Ausrichtung der einheitlichen Skalierung, und die folgenden Werte können erfolgen:

Keine - ungezwungene, einheitliche Skalierung, so dass die Grafik das gesamte Ansichtsfenster vollständig füllen kann.

Xminymin-Erzwingen Sie einheitliche Skalierung und richten Sie die in der Viewbox eingestellten <min-x> und <min-y> auf die minimalen x- und y-Werte des Ansichtsfensters aus.

Xmidymin - Kraft Unified Skaling erzwingen und den Mittelpunkt in x -Richtung in Vivewbox auf den Mittelpunkt der x -Richtung des Ansichtsfensters ausrichten. Kurz gesagt, der Mittelpunkt in x -Richtung ist ausgerichtet und die y -Richtung ist die gleiche wie oben.

Xmaxymin - Erzwingen Sie eine gleichmäßige Skalierung und richten Sie den in der Viewbox eingestellten <min -x> + <breiten> auf den maximalen X -Wert des Ansichtsfensters aus.

Es gibt andere Arten von Werten ähnlich wie: Xminymid, Xmidymid, Xmaxymid, Xminymax, Xmidymax, Xmaxymax. Die Bedeutung dieser Kombinationen ähnelt den oben genannten Situationen.

MeetorSlice : Optionaler Parameter, Sie können die folgenden Werte verwenden:

Treffen - Standardwert, gleichmäßig die Grafiken skalieren, damit alle Grafiken im Ansichtsfenster angezeigt werden.

Slice - Unified Skaling der Grafiken, so dass die Grafiken das Ansichtsfenster füllen können, und die Exzesse werden ausgeschnitten.

Die folgende Abbildung erläutert die Auswirkungen verschiedener Füllungen:

Transformation des Benutzerkoordinatensystems - Transformation Attribut

Diese Art der Transformation wird angegeben, indem die Transformationseigenschaft des Elements festgelegt wird. Es ist hier zu beachten, dass die Transformation des durch das Transformationsattribut festgelegten Elements nur das Element und seine Kinderelemente beeinflusst, nichts mit anderen Elementen zu tun hat und andere Elemente nicht beeinflusst.

Übersetzung - Übersetzung

Die Translation -Transformation übersetzt die relevanten Koordinatenwerte in die angegebene Position, und die Transformation muss in den in beiden Achsen übersetzten Betrag übergeben werden. Siehe Beispiel:

Dieses Beispiel zeichnet ein Rechteck und übersetzt seinen Ausgangspunkt (0,0) in (30,40). Obwohl der Koordinatenwert von (x, y) direkt festgelegt werden kann, ist es auch sehr bequem, ihn mithilfe der Translation -Transformation zu implementieren. Der zweite Parameter dieser Transformation kann weggelassen werden und der Standard wird verarbeitet, wenn 0 verarbeitet wird.

Drehen - drehen

Das Drehen eines Elements ist auch eine sehr häufige Aufgabe. Wir können die Drehtransformation verwenden, um sie zu implementieren, wodurch der Rotationswinkelparameter übergeben werden muss. Siehe Beispiel:

Dieses Beispiel zeigt ein 45-Grad-Rotations-Rechteck. Ein paar Notizen:

1. Die Transformation hier nimmt den Winkelwert als Parameter.

2. Rotation bezieht sich auf Drehung im Vergleich zur x-Achse.

3. Die Rotation wird um den Ursprung (0,0) des Benutzerkoordinatensystems erweitert.

Neigung - schief

Die Transformation unterstützt auch die Neigungstransformation, die entlang der x-Achse (links und links und rechte Winkel nach rechts geneigt werden kann, was tatsächlich auf die y-Achse gekippt wird) oder entlang der y-Achse (nach oben und unten, die nach unten geneigt ist, was tatsächlich zum X-Achse gefliegt ist). Diese Transformation erfordert eine Übergabe eines Winkelparameters, der den Neientwinkel bestimmen. Siehe das folgende Beispiel:

<Svg>

</svg>

Aus dem Ergebnis können Sie die Position und Form des Rechtecks derselben Größe nach verschiedenen Neigungstransformationen direkt erkennen. Beachten Sie hier, dass sich die Ausgangsposition des Rechtecks geändert hat, da sich im neuen Koordinatensystem (30,30) bereits in verschiedenen Positionen befindet.

Maßstab

Das Skalierungsobjekt wird durch eine Skalierungsumwandlung abgeschlossen, die 2 Parameter akzeptiert und die Skalierungsverhältnisse auf horizontal bzw. vertikal angeben. Wenn der zweite Parameter weggelassen wird, wird der gleiche Wert wie der erste Parameter genommen. Siehe das folgende Beispiel:

<Svg>

<text x = "20" y = "20" font-size = "20"> ABC (Skala) </text>

<text x = "50" y = "50" font-size = "20" transform = "scale (1,5)"> ABC (Skala) </text>

</svg>

Matrix transformieren - Matrix

Jeder, der Grafiken untersucht hat, weiß, dass alle Transformationen tatsächlich durch Matrizen dargestellt werden, sodass die obigen Transformationen tatsächlich durch eine 3*3 -Matrix dargestellt werden können:

BDF

0 0 1

Da nur 6 Werte verwendet werden, wird es auch als [ABCDEF] abgekürzt. Ordnen Sie die Matrix (a, b, c, d, e, f) zu, um die entsprechende Transformation zu implementieren. Die Transformation wandelt sowohl Koordinaten als auch Längen in neue Dimensionen um. Die entsprechenden Matrizen der obigen Transformationen sind wie folgt:

Translationstransformation [1 0 1 0 Tx Ty]:

1 0 tx

0 1 ty

0 0 1

Skalierungstransformation [SX 0 0 SY 0 0]:

SX 0 0

0 sy 0

0 0 1

Rotationstransformation [cos (a) sin (a) -Sin (a) cos (a) 0 0]:

cos (a) -sin (a) 0

Sünde (a) cos (a) 0

00 1

Neigung entlang der x-Achse [1 0 Tan (a) 1 0 0]:

1 Tan (a) 0

0 1 0

0 0 1

Neigung entlang der Y -Achse [1 Tan (a) 0 1 0 0]:

11 0

tan (a) 1 0

00 1

Ändern Sie die Essenz

Als wir zuvor Leinwand zusammengefasst haben, wussten wir, dass alle Arten von Transformationen auf das Benutzerkoordinatensystem angewendet werden. In SVG sind alle Transformationen auch für zwei Koordinatensysteme (im Wesentlichen Benutzerkoordinatensysteme) gelten. Nach Angabe des Transformationsattributs in das Containerobjekt oder das Graphobjekt oder das Angeben des Ansichtbox-Attributs an SVG, Symbol, Marker, Muster, Ansicht transformiert SVG nach dem aktuellen Benutzerkoordinatensystem, um ein neues Benutzerkoordinatensystem zu erstellen und auf das aktuelle Objekt und seine Sub-Objekte zu reagieren. Die in diesem Objekt angegebenen Koordinaten und Länge sind nicht mehr 1: 1 entsprechen dem peripheren Koordinatensystem, werden jedoch während der Verformung in das neue Benutzerkoordinatensystem konvertiert. Dieses neue Benutzerkoordinatensystem wirkt nur auf das aktuelle Element und seine untergeordneten Elemente.

Transformationskette

Die Transformationseigenschaft unterstützt die Festlegung mehrerer Transformationen. Diese Transformationen werden nur durch Räume in der Mitte getrennt und in der Eigenschaft zusammengefügt. Der Ausführungseffekt entspricht der Ausführung dieser Transformationen unabhängig voneinander in der Reihenfolge.

<!-Grafikelemente gehen hier->

</g>

Der obige Effekt entspricht dem folgenden:

<!-Grafikelemente gehen hier->

</g>

Einheit

Lassen Sie uns schließlich über Einheiten sprechen. Alle Koordinaten und Längen können mit und ohne Einheiten ausgestattet werden.

Ohne Einheit

Es wird angenommen, dass ein Wert ohne Einheiten Benutzereinheiten hat, was der Einheitswert des aktuellen Benutzerkoordinatensystems ist.

Die Situation, Einheiten zu bringen

Die relevanten Einheiten in SVG sind die gleichen wie in CSS: EM, Ex, PX, PT, PC, CM, MM und In. % Können auch für die Länge verwendet werden.

Relative Messeinheiten: EM und EX ähneln auch CSS im Verhältnis zur Schriftgröße und der X-Höhe der aktuellen Schriftart.

Absolute Messeinheit: Ein PX entspricht einer Benutzereinheit, dh 5px ist der gleiche wie 5. Ob ein PX einem Pixel entspricht, hängt jedoch davon ab, ob einige Transformationen gegeben wurden.

Die anderen Einheiten sind im Grunde genommen mehrfach von PX: 1PT = 1,25px, 1pc = 15px, 1mm = 3,543307px, 1cm = 35,43307px, 1in = 90px.

Wenn die Breite und Höhe des äußersten SVG -Elements keine Einheiten (dh Benutzereinheiten) angeben, werden diese Werte als PX angesehen.

Dieser Artikel ist ziemlich schwer zu sprechen. Denken Sie nur daran, dass sich die Koordinaten und die Länge des Grafikelements nach der doppelten Transformation des Fensterkoordinatensystems und der Nutzerkoordinaten -Systemtransformation auf die Koordinaten und die Länge des neuen Benutzerkoordinatensystems beziehen.

Praktische Referenz:

Skriptindex: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Entwicklungszentrum: https://developer.mozilla.org/en/svg

Beliebte Referenz: http://www.chinasvg.com/

Offizielles Dokument: http://www.w3.org/tr/svg11/