SVGSVGElement
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Das SVGSVGElement-Interface bietet Zugriff auf die Eigenschaften von <svg>-Elementen sowie Methoden zu deren Manipulation. Dieses Interface enthält auch verschiedene häufig genutzte Utility-Methoden, wie Matrixoperationen und die Fähigkeit, die Zeit der Neuzeichnung auf visuellen Rendering-Geräten zu steuern.
Instanz-Eigenschaften
Dieses Interface erbt auch Eigenschaften von seinem übergeordneten SVGGraphicsElement.
SVGSVGElement.xSchreibgeschützt-
Ein
SVGAnimatedLength, der mit demx-Attribut des angegebenen<svg>-Elements korrespondiert. SVGSVGElement.ySchreibgeschützt-
Ein
SVGAnimatedLength, der mit demy-Attribut des angegebenen<svg>-Elements korrespondiert. SVGSVGElement.widthSchreibgeschützt-
Ein
SVGAnimatedLength, der mit demwidth-Attribut des angegebenen<svg>-Elements korrespondiert. SVGSVGElement.heightSchreibgeschützt-
Ein
SVGAnimatedLength, der mit demheight-Attribut des angegebenen<svg>-Elements korrespondiert. SVGSVGElement.viewBoxSchreibgeschützt-
Ein
SVGAnimatedRect, der mit demviewBox-Attribut des angegebenen<svg>-Elements korrespondiert. SVGSVGElement.preserveAspectRatioSchreibgeschützt-
Ein
SVGAnimatedPreserveAspectRatio, der mit dempreserveAspectRatio-Attribut des angegebenen<svg>-Elements korrespondiert. SVGSVGElement.pixelUnitToMillimeterX-
Ein Float, der die Größe der Pixeleinheit (wie von CSS2 definiert) entlang der x-Achse des Viewports darstellt. Diese repräsentiert eine Einheit im Bereich von 70dpi bis 120dpi und könnte, bei Systemen die dies unterstützen, tatsächlich den Eigenschaften des Zielmediums entsprechen. In Systemen, in denen die Größe eines Pixels nicht bekannt ist, wird eine geeignete Standard-Pixelgröße bereitgestellt.
SVGSVGElement.pixelUnitToMillimeterY-
Ein Float, der die Größe einer Pixeleinheit entlang der y-Achse des Viewports darstellt.
SVGSVGElement.screenPixelToMillimeterX-
Benutzeroberflächenereignisse im DOM Level 2 geben die Bildschirmpositionen an, an denen ein bestimmtes UI-Ereignis auftrat. Wenn der Browser tatsächlich die physische Größe einer "Bildschirmeinheit" kennt, wird diese Float-Attribut diese Information ausdrücken; andernfalls stellen Benutzeragenten einen geeigneten Standardwert bereit (wie etwa
.28mm). SVGSVGElement.screenPixelToMillimeterY-
Entsprechende Größe eines Bildschirmpixels entlang der y-Achse des Viewports.
SVGSVGElement.useCurrentView-
Die initiale Ansicht (d.h. vor Vergrößerung und Schwenken) des innersten SVG-Dokumentfragments kann entweder die "Standard"-Ansicht sein, d.h. basierend auf Attributen auf dem
<svg>-Element wieviewBoxoder einer "benutzerdefinierten" Ansicht (d.h. ein Hyperlink in ein bestimmtes<view>oder anderes Element). Wenn die initiale Ansicht die "Standard"-Ansicht ist, ist dieses Attributfalse. Wenn die initiale Ansicht eine "benutzerdefinierte" Ansicht ist, ist dieses Attributtrue. SVGSVGElement.currentView-
Ein
SVGViewSpec, das die initiale Ansicht (d.h. vor Vergrößerung und Schwenken) des innersten SVG-Dokumentfragments definiert. Die Bedeutung hängt von der Situation ab: Wenn die initiale Ansicht eine "Standard"-Ansicht war, dann:- stimmen die Werte für
viewBox,preserveAspectRatioundzoomAndPaninnerhalb voncurrentViewmit den Werten der entsprechenden DOM-Attribute direkt aufSVGSVGElementüberein - ist der Wert für
transforminnerhalb voncurrentViewnull
Wenn die initiale Ansicht ein Link zu einem
<view>-Element war, dann:- stimmen die Werte für
viewBox,preserveAspectRatioundzoomAndPaninnerhalb voncurrentViewmit den entsprechenden Attributen des gegebenen<view>-Elements überein - ist der Wert für
transforminnerhalb voncurrentViewnull
Wenn die initiale Ansicht ein Link zu einem anderen Element war (d.h. nicht zu einem
<view>), dann:- stimmen die Werte für
viewBox,preserveAspectRatioundzoomAndPaninnerhalb voncurrentViewmit den Werten der entsprechenden DOM-Attribute direkt aufSVGSVGElementfür das nächstgelegene übergeordnete<svg>-Element überein - sind die Werte für
transforminnerhalb voncurrentViewnull
Wenn die initiale Ansicht ein Link in das SVG-Dokumentfragment unter Verwendung eines SVG-View-Spezifikations-Fragmentbezeichners war (d.h.
#svgView(…)), dann:- entsprechen die Werte für
viewBox,preserveAspectRatio,zoomAndPanundtransforminnerhalb voncurrentViewden Werten des SVG-View-Spezifikations-Fragmentbezeichners
- stimmen die Werte für
SVGSVGElement.currentScale-
Auf einem äußersten
<svg>-Element gibt dieses Float-Attribut den aktuellen Skalierungsfaktor relativ zur initialen Ansicht an, wobei Benutzervergrößerungs- und Verschiebungsoperationen berücksichtigt werden. DOM-AttributecurrentScaleundcurrentTranslatesind äquivalent zu der 2×3-Matrix[a b c d e f] = [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]. Wenn "Vergrößerung" aktiviert ist (d.h.zoomAndPan="magnify"), dann ist der Effekt, als ob eine zusätzliche Transformation auf der äußersten Ebene des SVG-Dokumentfragments platziert wird (d.h. außerhalb des äußersten<svg>-Elements). SVGSVGElement.currentTranslateSchreibgeschützt-
Ein
DOMPointReadOnly, der den Übersetzungsfaktor darstellt, der Benutzer-"Vergrößerung" für ein äußerstes<svg>-Element berücksichtigt. Das Verhalten ist undefiniert für<svg>-Elemente, die nicht auf der äußersten Ebene sind.
Instanz-Methoden
Dieses Interface erbt auch Methoden von seinem übergeordneten SVGGraphicsElement.
SVGSVGElement.suspendRedraw()-
Nimmt einen Zeitüberschreitungswert entgegen, der angibt, dass die Neuzeichnung nicht stattfinden soll, bis:
der entsprechende
unsuspendRedraw()-Aufruf erfolgt ist, einunsuspendRedrawAll()-Aufruf erfolgt ist oder sein Timer abgelaufen ist.In Umgebungen, die Interaktivität nicht unterstützen (z.B. Druckmedien), darf die Neuzeichnung nicht ausgesetzt werden. Aufrufe von
suspendRedraw()undunsuspendRedraw()sollten (müssen aber nicht) in balancierten Paaren erfolgen.Um Neuzeichnungsaktionen auszusetzen, während eine Sammlung von Änderungen im SVG DOM erfolgt, leiten Sie die Änderungen im SVG DOM mit einem Methodenaufruf ein, der ähnlich ist wie:
jsconst suspendHandleID = suspendRedraw(maxWaitMilliseconds);und folgen Sie den Änderungen mit einem Methodenaufruf, der ähnlich ist wie:
jsunsuspendRedraw(suspendHandleID);Beachten Sie, dass mehrere
suspendRedraw()-Aufrufe gleichzeitig verwendet werden können und dass jeder dieser Methodenaufrufe unabhängig von den anderensuspendRedraw()-Methodenaufrufen behandelt wird. SVGSVGElement.unsuspendRedraw()-
Hebt ein spezifisches
suspendRedraw()auf, indem eine eindeutige Suspend-Handle-ID angegeben wird, die in einem vorherigensuspendRedraw()-Aufruf zurückgegeben wurde. SVGSVGElement.unsuspendRedrawAll()-
Hebt alle derzeit aktiven
suspendRedraw()-Methodenaufrufe auf. Diese Methode ist am nützlichsten am Ende einer Reihe von SVG DOM-Aufrufen, um sicherzustellen, dass alle ausstehendensuspendRedraw()-Methodenaufrufe aufgehoben wurden. SVGSVGElement.forceRedraw()-
In Rendering-Umgebungen, die Interaktivität unterstützen, zwingt der Benutzeragent dazu, sofort alle Regionen des Viewports neu zu zeichnen, die eine Aktualisierung erfordern.
SVGSVGElement.pauseAnimations()-
Stoppt (d.h. pausiert) alle derzeit laufenden Animationen, die im SVG-Dokumentfragment definiert sind, das diesem
<svg>-Element entspricht, wodurch die Animationsuhr für dieses Dokumentfragment stillsteht, bis sie fortgesetzt wird. SVGSVGElement.unpauseAnimations()-
Nimmt die (d.h. pausiert) derzeit laufenden Animationen im SVG-Dokumentfragment wieder auf, sodass die Animationsuhr ab dem Zeitpunkt, an dem sie pausiert wurde, fortgesetzt wird.
SVGSVGElement.animationsPaused()-
Gibt
truezurück, wenn dieses SVG-Dokumentfragment im pausierten Zustand ist. SVGSVGElement.getCurrentTime()-
Gibt die aktuelle Zeit in Sekunden relativ zum Startzeitpunkt für das aktuelle SVG-Dokumentfragment zurück. Wenn
getCurrentTime()aufgerufen wird, bevor die Dokument-Zeitachse begonnen hat (zum Beispiel durch Skript, das in einem<script>-Element ausgeführt wird, bevor dasSVGLoad-Ereignis des Dokuments ausgelöst wird), wird0zurückgegeben. SVGSVGElement.setCurrentTime()-
Passt die Uhr für dieses SVG-Dokumentfragment an und legt eine neue aktuelle Zeit fest. Wenn
setCurrentTime()aufgerufen wird, bevor die Dokument-Zeitachse begonnen hat (zum Beispiel durch Skript, das in einem<script>-Element ausgeführt wird, bevor dasSVGLoad-Ereignis des Dokuments ausgelöst wird), gibt der Sekundenwert im letzten Aufruf der Methode die Zeit an, zu der das Dokument seekt, sobald die Dokument-Zeitachse begonnen hat. SVGSVGElement.getIntersectionList()-
Gibt eine
NodeListvon Grafikelementen zurück, deren gerenderter Inhalt das angegebene Rechteck schneidet. Jedes Kandidat-Grafikelement wird nur dann als Treffer betrachtet, wenn dasselbe Grafikelement Ziel von Zeigereignissen sein kann, wie in der Verarbeitung vonpointer-eventsdefiniert. SVGSVGElement.getEnclosureList()-
Gibt eine
NodeListvon Grafikelementen zurück, deren gerenderter Inhalt vollständig im angegebenen Rechteck enthalten ist. Jedes Kandidat-Grafikelement wird nur dann als Treffer betrachtet, wenn dasselbe Grafikelement Ziel von Zeigereignissen sein kann, wie in der Verarbeitung vonpointer-eventsdefiniert. SVGSVGElement.checkIntersection()-
Gibt
truezurück, wenn der gerenderte Inhalt des gegebenen Elements das angegebene Rechteck schneidet. Jedes Kandidat-Grafikelement wird nur dann als Treffer betrachtet, wenn dasselbe Grafikelement Ziel von Zeigereignissen sein kann, wie in der Verarbeitung vonpointer-eventsdefiniert. SVGSVGElement.checkEnclosure()-
Gibt
truezurück, wenn der gerenderte Inhalt des gegebenen Elements vollständig innerhalb des angegebenen Rechtecks enthalten ist. Jedes Kandidat-Grafikelement wird nur dann als Treffer betrachtet, wenn dasselbe Grafikelement Ziel von Zeigereignissen sein kann, wie in der Verarbeitung vonpointer-eventsdefiniert. SVGSVGElement.deselectAll()-
Hebt die Auswahl aller ausgewählter Objekte auf, einschließlich jedes gewünschten Texts und jeder Eingabeleiste.
SVGSVGElement.createSVGNumber()-
Erstellt ein
SVGNumber-Objekt außerhalb eines Dokumentbaums. Das Objekt wird auf0initialisiert. SVGSVGElement.createSVGLength()-
Erstellt ein
SVGLength-Objekt außerhalb eines Dokumentbaums. Das Objekt wird auf0Benutzereinheiten initialisiert. SVGSVGElement.createSVGAngle()-
Erstellt ein
SVGAngle-Objekt außerhalb eines Dokumentbaums. Das Objekt wird auf einen Wert von0Grad (ohne Einheit) initialisiert. SVGSVGElement.createSVGPoint()-
Erstellt ein
DOMPoint-Objekt außerhalb eines Dokumentbaums. Das Objekt wird auf den Punkt(0,0)im Benutzerkoordinatensystem initialisiert. SVGSVGElement.createSVGMatrix()-
Erstellt ein
DOMMatrix-Objekt außerhalb eines Dokumentbaums. Das Objekt wird auf die Einheitsmatrix initialisiert. SVGSVGElement.createSVGRect()-
Erstellt ein
SVGRect-Objekt außerhalb eines Dokumentbaums. Das Objekt wird initialisiert, sodass alle Werte auf0Benutzereinheiten gesetzt sind. SVGSVGElement.createSVGTransform()-
Erstellt ein
SVGTransform-Objekt außerhalb eines Dokumentbaums. Das Objekt wird auf eine Einheitsmatrix-Transformation (SVG_TRANSFORM_MATRIX) initialisiert. SVGSVGElement.createSVGTransformFromMatrix()-
Erstellt ein
SVGTransform-Objekt außerhalb eines Dokumentbaums. Das Objekt wird auf die gegebene Matrix-Transformation initialisiert (d.h.SVG_TRANSFORM_MATRIX). Die Werte aus der Parameter-Matrix werden kopiert; die Matrix-Parameter werden nicht alsSVGTransform::matrixübernommen. SVGSVGElement.getElementById()-
Durchsucht dieses SVG-Dokumentfragment (d.h. die Suche ist auf einen Teilbaum des Dokumentbaums beschränkt) nach einem Element, dessen
iddurchelementIdangegeben wird. Wenn ein Element gefunden wird, wird dieses Element zurückgegeben. Wenn kein solches Element existiert, wirdnullzurückgegeben. Das Verhalten ist nicht definiert, wenn mehr als ein Element diese id hat.
Ereignis-Handler
Die folgenden Window onXYZ Ereignis-Handler-Eigenschaften sind ebenfalls als Aliase verfügbar, die auf das window-Objekt zielen. Es wird jedoch empfohlen, diese direkt auf das window-Objekt zu hören, statt auf SVGSVGElement.
Hinweis:
Die Verwendung von addEventListener() auf SVGSVGElement funktioniert nicht für die unten aufgeführten onXYZ Ereignis-Handler. Hören Sie diese Ereignisse stattdessen auf dem window-Objekt.
SVGSVGElement.onafterprint-
Ausgelöst, nachdem das zugehörige Dokument mit dem Drucken begonnen hat oder die Druckvorschau geschlossen wurde.
SVGSVGElement.onbeforeprint-
Ausgelöst, bevor das zugehörige Dokument gedruckt oder zur Vorschau aufbereitet wird.
SVGSVGElement.onbeforeunload-
Ausgelöst, wenn das Fenster, das Dokument und seine Ressourcen entladen werden.
SVGSVGElement.ongamepadconnected-
Ausgelöst, wenn der Browser erkennt, dass ein Gamepad angeschlossen wurde oder das erste Mal eine Taste/Achse des Gamepads verwendet wird.
SVGSVGElement.ongamepaddisconnected-
Ausgelöst, wenn der Browser erkennt, dass ein Gamepad getrennt wurde.
SVGSVGElement.onhashchange-
Ausgelöst, wenn sich der Fragmentbezeichner der URL geändert hat (der Teil der URL, der mit
#beginnt und folgt). SVGSVGElement.onlanguagechange-
Ausgelöst, wenn sich die bevorzugte Sprache des Benutzers ändert.
SVGSVGElement.onmessage-
Ausgelöst, wenn das Fenster eine Nachricht erhält, z.B. aus einem Aufruf von
Window.postMessage()von einem anderen Browsing-Kontext. SVGSVGElement.onmessageerror-
Ausgelöst, wenn das Fenster eine Nachricht empfängt, die nicht deserialisiert werden kann.
SVGSVGElement.onoffline-
Ausgelöst, wenn der Browser den Zugang zum Netzwerk verloren hat und der Wert von
Navigator.onLineauffalsewechselt. SVGSVGElement.ononline-
Ausgelöst, wenn der Browser wieder Zugang zum Netzwerk hat und der Wert von
Navigator.onLineauftruewechselt. SVGSVGElement.onpagehide-
Ausgelöst, wenn der Browser die aktuelle Seite im Prozess des Darstellens einer anderen Seite aus dem Verlauf der Sitzung verbirgt.
SVGSVGElement.onpageshow-
Ausgelöst, wenn der Browser das Dokument des Fensters aufgrund einer Navigation anzeigt.
SVGSVGElement.onpopstate-
Ausgelöst, wenn der aktive Verlaufseintrag sich ändert, während der Benutzer im Sitzungsverlauf navigiert.
SVGSVGElement.onrejectionhandled-
Ausgelöst, wann immer ein JavaScript-
Promiseabgelehnt und die Ablehnung behandelt wurde. SVGSVGElement.onstorage-
Ausgelöst, wenn ein Speicherbereich (
localStorage) im Kontext eines anderen Dokuments geändert wurde. SVGSVGElement.onunhandledrejection-
Ausgelöst, wann immer ein
Promiseabgelehnt, aber die Ablehnung nicht behandelt wurde. SVGSVGElement.onunload-
Ausgelöst, wenn das Dokument entladen wird.
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2> # InterfaceSVGSVGElement> |