Wie man von DOM zu SVG -Koordinaten und wieder zurück übersetzt

Schlüsselpunkte

• SVG hat ein eigenes Koordinatensystem, das basierend auf dem viewBox -attribut definiert ist, und kann auf jede Größe skaliert werden. Dies kompliziert das Hinzufügen von SVG -Elementen nach Cursorposition, insbesondere in reaktionsschnellen Designs.
• in HTML -Seiten eingebettete SVG wird Teil des DOM und kann wie andere Elemente betrieben werden. Auf diese Weise kann die Umwandlung zwischen Koordinatensystemen vollständig vermieden werden.
• Die Konvertierung von DOM zu SVG -Koordinaten kann erreicht werden, indem die Position und Größe nach der getBoundingClientRect() -Methode extrahiert werden. Die Umwandlung von SVG in DOM -Koordinaten ist jedoch schwieriger und erfordert die Verwendung des SVG -eigenen Matrix -Zersetzungsmechanismus.
• SVG oder einzelne Elemente können durch Übersetzung, Skalierung, Rotation und/oder Kippen transformiert werden, was die endgültigen SVG -Koordinaten beeinflusst. Die Methode .getScreenCTM() kann sowohl auf jedes Element als auch auf die SVG selbst angewendet werden, um alle Transformationen zu berücksichtigen.

Die Verwendung von SVG ist relativ einfach - bis Sie DOM- und Vektorinteraktionen mischen möchten.

SVGs definiert sein eigenes Koordinatensystem in seinem viewBox -attribut. Zum Beispiel:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"></svg>

Dies setzt 800 Einheiten -Breite und 600 Einheitenhöhe ab 0,0. Diese Einheiten sind alle zum Zeichnen verwendeten Messeinheiten, und der dezimale Teil der Einheit kann verwendet werden. Wenn Sie diesen SVG in einer Fläche von 800 x 600 Pixel platzieren, sollte jedes SVG -Einheit direkt auf ein Bildschirmpixel abgebildet werden.

Vektorbilder können jedoch auf jede Größe skaliert werden - insbesondere in reaktionsschnellen Designs. Ihr SVG kann auf 400 x 300 skaliert werden und kann sogar die Verformung in 10 x 1000 Raum dehnen. Wenn Sie sie nach der Cursorposition platzieren möchten, wird es schwieriger, dieser SVG mehr Elemente hinzuzufügen.

Hinweis: Weitere Informationen zu SVG -Koordinaten finden Sie in den Artikeln Sara Soueidan, ViewPorts, Viewbox und PreserveSpectratio.

Koordinatenumwandlung aus der Koordinierung

Sie können möglicherweise die Konvertierung zwischen Koordinatensystemen insgesamt vermeiden.

SVG eingebettet in HTML -Seiten (anstelle von Bildern oder CSS -Hintergründen) werden Teil des DOM und können wie andere Elemente betrieben werden. Zum Beispiel ein grundlegender SVG, der einen einzelnen Kreis enthält:

<svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>

Sie können CSS -Effekte darauf anwenden:

circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #fff;
}

Sie können auch Ereignishandler anhängen, um Eigenschaften zu ändern:

const mycircle = document.getElementById('mycircle');

mycircle.addEventListener('click', (e) => {
  console.log('circle clicked - enlarging');
  mycircle.setAttribute('r', 60);
});

Das folgende Beispiel fügt einem SVG -Bild dreißig zufällige Kreise hinzu, wendet in CSS einen Schwebeffekt an und erhöht den Radius um zehn Einheiten mit JavaScript, wenn Sie auf den Kreis klicken.

Zeigen Sie das Beispiel auf CodePen an

SVG zur DOM -Koordinatenkonvertierung

Es kann erforderlich sein, das DOM -Element über das SVG -Element zu überlagern - beispielsweise ein Menü oder ein Informationsfeld auf dem aktiven Land, das auf der Weltkarte angezeigt wird. Unter der Annahme, dass SVG in HTML eingebettet ist, werden die Elemente Teil des DOM, sodass die Position und Größe mit der

-Methode extrahiert werden können. (Öffnen Sie die Konsole im obigen Beispiel, um die neuen Eigenschaften des Klickens auf den Kreis nach dem Radius anzuzeigen.) getBoundingClientRect()

Element.getBoundingClientRect() wird in allen Browsern unterstützt und gibt ein Domrect -Objekt mit den folgenden Pixelgrößenattributen zurück:

• .x und .left: x-koordinat auf der linken Seite des Elements relativ zum Ansichtsfenster
• .right: X-Koordinate auf der rechten Seite des Elements relativ zum Ansichtsfenster-Ursprung
• .y und .top: Das y-Koordinat der Oberseite des Elements relativ zum Ansichtsfenster-Ursprung
• .bottom: Das y-Koordinat des Bodens des Elements relativ zum Ansichtsfenster-Ursprung
• .width: Die Breite des Elements (nicht in IE8 und unten unterstützt, aber die gleiche wie .right minus .left)
• .height: Die Höhe des Elements (nicht in IE8 und unten unterstützt, aber die gleiche wie .bottom minus .top)

Alle Koordinaten sind relativ zum Browser -Ansichtsfenster, sodass sie sich beim Scrollen der Seite ändern. Die absolute Position auf der Seite kann berechnet werden, indem window.scrollX zu .left und window.scrollY zu .top hinzugefügt wird.

dom zu SVG -Koordinatenkonvertierung

Das ist schwieriger. Nehmen wir an, Sie möchten das neue SVG -Element in der Ansichtskiste aufnehmen, in der das Klickereignis stattgefunden hat. Das Event -Handler -Objekt liefert DOM .clientX und .clientY Pixelkoordinaten, muss jedoch in SVG -Einheiten konvertiert werden.

Sie denken vielleicht, dass Sie die Koordinaten von SVG -Punkten berechnen können, indem Sie Multiplikationsfaktoren anwenden. Wenn beispielsweise eine SVG von 1000 Einheitenbreite in einem Behälter mit einer Breite von 500 Pixel platziert wird, können Sie alle DOM -X -Koordinaten mit 2 multiplizieren, um die SVG -Position zu erhalten. Das wird nicht funktionieren! …

• Der SVG ist garantiert nicht perfekt für Ihren Behälter.
• Wenn sich die Elementgröße ändert - vielleicht ändert sich der Browser als Reaktion auf den Benutzer - die Breite und die Höhenfaktoren müssen neu berechnet werden.
• SVG oder ein oder mehrere Elemente können im 2D- oder 3D -Raum transformiert werden.
• Auch wenn Sie diese Hindernisse überwinden, funktioniert es nie wie erwartet und es gibt oft Fehler.

Zum Glück bietet SVG einen eigenen Matrix -Zersetzungsmechanismus, um Koordinaten umzuwandeln. Der erste Schritt besteht darin, einen Punkt auf der SVG mit der createSVGPoint() -Methode zu erstellen und die Koordinaten des Bildschirms/Ereignisses X und Y in:

zu übergeben:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"></svg>

.getScreenCTM() Sie können dann eine Matrix -Transformation anwenden, die aus der inversen Matrix der SVG -Methode erstellt wurde, die die SVG -Einheiten auf die Bildschirmkoordinaten bildet:

<svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>

SVGP hat jetzt .x und .y Eigenschaften, die Koordinaten in der SVG -Viewbox liefern.

Der folgende Code platziert den Kreis am Punkt, den auf die SVG -Leinwand geklickt hat:

circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #fff;
}

Hinweis: Die Methode createElementNS() entspricht der Standard -DOM -Methode, außer dass sie einen XML -Namespace -URI angibt. Mit anderen Worten, es funktioniert eher auf SVG -Dokumenten als auf HTML. createElement()

konvertieren Sie die SVG -Koordinaten

, um SVG -Koordinaten zu transformieren

Es gibt einen weiteren komplexeren Aspekt. Ein SVG oder ein einzelnes Element kann durch Übersetzung, Skalierung, Rotation und/oder Kippen transformiert werden, was die endgültigen SVG -Koordinaten beeinflusst. Beispielsweise ist die folgende <g> -Schicht 4 -mal größer als die Standard -SVG -Einheit, sodass die Koordinaten ein Viertel der Koordinaten sein werden, die das SVG enthalten:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"></svg>

Das erzeugte Rechteck sieht aus, als weist eine Breite und Höhe von 400 Einheiten an den Positionen 200, 200 auf.

Glücklicherweise kann die

-Methode sowohl auf jedes Element als auch auf das SVG selbst angewendet werden. Die generierte Matrix berücksichtigt alle Transformationen, sodass Sie eine einfache .getScreenCTM() -Enwaltfunktion erstellen können: svgPoint()

<svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>

Die folgende Demonstration funktioniert in allen modernen Browsern,

(Wenn Sie JavaScript in ES5 konvertieren, funktioniert es auch in IE11!) . Beim Klicken/Klicken auf SVG wird ein Kreis zum Cursorpunkt hinzugefügt.

Dies geschieht auch beim Klicken auf den transformierten Bereich

, aber das Element anstelle des SVG selbst an die Funktion <g> übergeben, um sicherzustellen, dass die richtigen Koordinaten berechnet werden: svgPoint()

Zeigen Sie das Beispiel auf CodePen an

Idealerweise ist es am besten, DOM zu/von der SVG -Koordinatenkonvertierung zu vermeiden. Wenn dies jedoch nicht möglich ist, verwenden Sie die oben beschriebene Methode, um sicherzustellen, dass der Prozess an allen Seitengrößen robust ist.

FAQs über DOM zu SVG -Koordinaten und umgekehrte Konvertierung

Was ist der Unterschied zwischen DOM- und SVG -Koordinaten?

Dokumentobjektmodell (DOM) und skalierbare Vektorgrafiken (SVG) sind beide Komponenten der Webentwicklung, sie haben jedoch unterschiedliche Verwendungen. DOM ist die Programmierschnittstelle für HTML- und XML -Dokumente. Es repräsentiert die Struktur eines Dokuments und bietet eine Möglichkeit, seinen Inhalt und seine visuelle Darstellung zu manipulieren. Andererseits ist SVG ein XML-basierter Vektorbildformat für zweidimensionale Grafiken. Der Hauptunterschied zwischen beiden ist ihr Koordinatensystem. DOM verwendet ein pixelbasiertes Koordinatensystem, während SVG ein System basiert, das auf dem

-attribut basiert, das skaliert und transformiert werden kann. viewBox

Wie kann ich DOM -Koordinaten in SVG -Koordinaten konvertieren?

Konvertieren von DOM -Koordinaten in SVG -Koordinaten beinhaltet das Erstellen eines Punktes im SVG -Koordinatensystem unter Verwendung der

-Methode des SVG -Elements. Sie können dann die Methode createSVGPoint verwenden, um den Punkt in ein SVG -Koordinatensystem umzuwandeln. Diese Methode nimmt ein Dommatrix -Objekt an, das die Transformationsmatrix des SVG -Elements darstellt. matrixTransform

Wie konvertieren Sie SVG -Koordinaten in DOM -Koordinaten zurück?

Um SVG -Koordinaten zurück in DOM -Koordinaten umzuwandeln, können Sie die

-Methode des SVGMatrix -Objekts verwenden. Diese Methode gibt ein neues SVGMatrix -Objekt zurück, bei dem es sich um die inverse Matrix der ursprünglichen Matrix handelt. Durch Multiplizieren der SVG -Punkte mit dieser inversen Matrix können Sie sie wieder in das DOM -Koordinatensystem umwandeln. inverse

Welche Rolle spielt das Ansichtbox -Attribut in SVG?

Das

-Merkmal in

in SVG wird verwendet, um das Seitenverhältnis und das Koordinatensystem des SVG -Bildes anzugeben. Sie können die Skalierung und Positionierung von SVG -Elementen steuern. Das Attribut viewBox erfordert vier Werte: Min-X, Min-y, Breite und Höhe. Diese Werte definieren das Rechteck im SVG -Koordinatensystem. viewBox

Wie kann ich DOM zum SVG -Paket in meinem Projekt verwenden?

DOM zu SVG -Paket ist ein nützliches Tool zum Konvertieren von DOM -Koordinaten in SVG -Koordinaten und umgekehrter Konvertierung. Um es in Ihrem Projekt zu verwenden, müssen Sie es mit NPM (dem Paketmanager für die JavaScript -Programmiersprache) installieren. Nach der Installation können Sie es in Ihre JavaScript -Datei einführen und die Konvertierung mit ihren Methoden durchführen.

Was ist das CX -Attribut in SVG?

Das

-Merkmal in cx in SVG wird verwendet, um die X-Koordinate der Mitte des Kreises anzugeben. Es ist eine der grundlegenden Eigenschaften für die Erstellung eines SVG -Kreises. Der Wert des cx -attributs ist die Länge im Benutzerkoordinatensystem.

Kann ich sowohl DOM als auch SVG in meiner Webseite verwenden?

Ja, Sie können sowohl DOM als auch SVG in Ihrer Webseite verwenden. SVG ist in HTML eingebettet, daher ist es Teil des DOM. Sie können DOM -Methoden und Eigenschaften verwenden, um SVG -Elemente zu manipulieren. Auf diese Weise können Sie dynamische und interaktive Grafiken auf Ihren Webseiten erstellen.

Wie unterscheidet sich das Koordinatensystem in SVG von dem in HTML?

Das Koordinatensystem in SVG unterscheidet sich von der in HTML. In HTML basiert das Koordinatensystem auf Pixel und der Ursprung befindet sich in der oberen linken Ecke der Seite. In SVG wird das Koordinatensystem durch das viewBox -attribut definiert, und der Ursprung befindet sich in der oberen linken Ecke von viewBox. Dies macht die SVG -Grafik skalierbar und unabhängig von der Lösung.

Wie konvertieren Sie SVG -Koordinaten?

Sie können das Attribut transform verwenden, um SVG -Koordinaten zu konvertieren. Mit dieser Eigenschaft können Sie verschiedene Transformationen in SVG -Elemente wie Übersetzung, Rotation, Skalierung und Kippen anwenden. Der Wert des transform -attributs ist eine Liste von Transformationsfunktionen. Jede Funktion wird auf die Elemente in der aufgeführten Reihenfolge angewendet.

Was sind einige häufige Anwendungsfälle für die Konvertierung zwischen DOM- und SVG -Koordinaten?

In vielen Fällen ist es sehr nützlich, zwischen DOM- und SVG -Koordinaten umzuwandeln. Wenn Sie beispielsweise ein interaktives SVG -Diagramm erstellen, müssen Sie möglicherweise Mauskoordinaten (sich im DOM -Koordinatensystem befinden) in SVG -Koordinaten umwandeln, um das SVG -Element zu manipulieren. Wenn Sie stattdessen ein benutzerdefiniertes SVG -Element erstellen, müssen Sie seine Koordinaten möglicherweise wieder in das DOM -Koordinatensystem konvertieren, um es korrekt auf die Seite zu platzieren.

Das obige ist der detaillierte Inhalt vonWie man von DOM zu SVG -Koordinaten und wieder zurück übersetzt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!