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!