SVGSVGElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die SVGSVGElement-Schnittstelle bietet Zugriff auf die Eigenschaften der <svg>-Elemente sowie Methoden, um sie zu manipulieren. Diese Schnittstelle enthält auch verschiedene häufig verwendete Hilfsmethoden, wie Matrixoperationen und die Möglichkeit, die Zeit der Neuzeichnung auf visuellen Ausgabegeräten zu steuern.

EventTarget Node Element SVGElement SVGGraphicsElement SVGSVGElement

Instanzeigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, SVGGraphicsElement.

SVGSVGElement.x Schreibgeschützt

Ein SVGAnimatedLength, das dem x Attribut des angegebenen <svg> Elements entspricht.

SVGSVGElement.y Schreibgeschützt

Ein SVGAnimatedLength, das dem y Attribut des angegebenen <svg> Elements entspricht.

SVGSVGElement.width Schreibgeschützt

Ein SVGAnimatedLength, das dem width Attribut des angegebenen <svg> Elements entspricht.

SVGSVGElement.height Schreibgeschützt

Ein SVGAnimatedLength, das dem height Attribut des angegebenen <svg> Elements entspricht.

SVGSVGElement.pixelUnitToMillimeterX Veraltet

Ein Float, der die Größe der Pixeleinheit (wie in CSS2 definiert) entlang der x-Achse des Viewports darstellt, was eine Einheit irgendwo im Bereich von 70dpi bis 120dpi repräsentiert und auf Systemen, die dies unterstützen, möglicherweise den Eigenschaften des Zielmediums entspricht. Auf Systemen, auf denen es unmöglich ist, die Größe eines Pixels zu kennen, wird eine geeignete Standardpixelgröße bereitgestellt.

SVGSVGElement.pixelUnitToMillimeterY Veraltet

Ein Float, der die Größe einer Pixeleinheit entlang der y-Achse des Viewports darstellt.

SVGSVGElement.screenPixelToMillimeterX Veraltet

Benutzeroberflächenereignisse (UI) in DOM Level 2 geben die Bildschirmpositionen an, an denen das gegebene UI-Ereignis auftrat. Wenn der Browser tatsächlich die physische Größe einer „Bildschirmeinheit“ kennt, drückt dieses Float-Attribut diese Information aus; andernfalls stellen Benutzeragenten einen geeigneten Standardwert bereit (z. B. .28mm).

SVGSVGElement.screenPixelToMillimeterY Veraltet

Entsprechende Größe eines Bildschirmpixels entlang der y-Achse des Viewports.

SVGSVGElement.useCurrentView Veraltet Nicht standardisiert

Die initiale Ansicht (d.h. vor Vergrößerung und Schwenken) des aktuellen, innersten SVG-Dokumentfragments kann entweder die „Standard“-Anschicht sein, d.h. basierend auf Attributen des <svg> Elements wie viewBox) oder auf einer „benutzerdefinierten“ Ansicht (d.h. ein Hyperlink zu einem bestimmten <view> oder anderen Elementen). Wenn die initiale Ansicht die „Standard“-Ansicht ist, dann ist dieses Attribut false. Wenn die initiale Ansicht eine „benutzerdefinierte“ Ansicht ist, dann ist dieses Attribut true.

SVGSVGElement.currentView Veraltet Nicht standardisiert

Ein SVGViewSpec, das die initiale Ansicht (d.h. vor Vergrößerung und Schwenken) des aktuellen, innersten SVG-Dokumentfragments definiert. Die Bedeutung hängt von der Situation ab: Wenn die initiale Ansicht eine „Standard“-Ansicht war, dann:

Wenn die initiale Ansicht ein Link zu einem <view> Element war, dann:

Wenn die initiale Ansicht ein Link zu einem anderen Element war (d. h., außer einem <view>), dann:

Wenn die initiale Ansicht ein Link in das SVG-Dokumentfragment mit einem SVG-Ansichtsspezifikations-Fragmentbezeichner war (d. h. #svgView(…)), dann:

SVGSVGElement.currentScale

Bei einem äußersten <svg> Element zeigt dieses Float-Attribut den aktuellen Skalierungsfaktor relativ zur initialen Ansicht an, um die Vergrößerung und Schwenkoperationen des Benutzers zu berücksichtigen. DOM-Attribute currentScale und currentTranslate sind äquivalent zur 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 entspricht die Wirkung dem Platzieren einer zusätzlichen Transformation auf der äußersten Ebene des SVG-Dokumentfragments (d. h. außerhalb des äußersten <svg> Elements).

SVGSVGElement.currentTranslate Schreibgeschützt

Ein SVGPoint, der den Übersetzungsfaktor darstellt, der die Benutzer-"Vergrößerung" für ein äußerstes <svg> Element berücksichtigt. Das Verhalten ist für <svg> Elemente, die nicht auf der äußersten Ebene liegen, nicht definiert.

Instanzmethoden

Diese Schnittstelle erbt auch Methoden von ihrem Elternteil, SVGGraphicsElement.

SVGSVGElement.suspendRedraw() Veraltet

Nimmt einen Timeout-Wert, der angibt, dass keine Neuzeichnung stattfinden soll, bis:

der entsprechende unsuspendRedraw()-Aufruf erfolgt ist, ein unsuspendRedrawAll()-Aufruf erfolgt ist oder sein Timer abgelaufen ist.

In Umgebungen, die keine Interaktivität unterstützen (z. B. Druckmedien), darf die Neuzeichnung nicht ausgesetzt werden. Aufrufe von suspendRedraw() und unsuspendRedraw() sollten paarweise erfolgen, müssen es aber nicht.

Um Neuzeichnungsaktionen bei einer Sammlung von SVG-DOM-Änderungen auszusetzen, gehen Sie den Änderungen am SVG-DOM mit einem Methodenaufruf wie dem folgenden voraus:

js
const suspendHandleID = suspendRedraw(maxWaitMilliseconds);

und folgen Sie den Änderungen mit einem Methodenaufruf wie dem folgenden:

js
unsuspendRedraw(suspendHandleID);

Beachten Sie, dass mehrere suspendRedraw()-Aufrufe gleichzeitig verwendet werden können und dass jeder dieser Methodenaufrufe unabhängig von den anderen suspendRedraw()-Methodenaufrufen behandelt wird.

SVGSVGElement.unsuspendRedraw() Veraltet

Hebt eine angegebene suspendRedraw() durch Bereitstellung einer eindeutigen Aussetzungs-Handle-ID auf, die von einem früheren suspendRedraw()-Aufruf zurückgegeben wurde.

SVGSVGElement.unsuspendRedrawAll() Veraltet

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 ausstehenden suspendRedraw()-Methodenaufrufe aufgehoben wurden.

SVGSVGElement.forceRedraw() Veraltet

Erzwingt in Rendering-Umgebungen, die Interaktivität unterstützen, dass der Benutzeragent alle Bereiche des Viewports, die aktualisiert werden müssen, sofort neu zeichnet.

SVGSVGElement.pauseAnimations()

Setzt alle derzeit laufenden Animationen, die im SVG-Dokumentfragment definiert sind, das diesem <svg>-Element entspricht, aus (d.h. pausiert sie), wodurch die Animationsuhr dieses Dokumentfragments stillsteht, bis sie fortgesetzt wird.

SVGSVGElement.unpauseAnimations()

Nimmt derzeit laufende Animationen, die innerhalb des SVG-Dokumentfragments definiert sind, wieder auf (d.h. setzt sie fort), wodurch die Animationsuhr ab dem Zeitpunkt weiterläuft, an dem sie pausiert wurde.

SVGSVGElement.animationsPaused()

Gibt true zurück, wenn dieses SVG-Dokumentfragment in einem pausierten Zustand ist.

SVGSVGElement.getCurrentTime()

Gibt die aktuelle Zeit in Sekunden relativ zur Startzeit für das aktuelle SVG-Dokumentfragment zurück. Wenn getCurrentTime() aufgerufen wird, bevor die Dokumentzeitachse begonnen hat (zum Beispiel durch ein Skript, das in einem <script>-Element ausgeführt wird, bevor das SVGLoad-Ereignis des Dokuments abgesendet wird), wird 0 zurückgegeben.

SVGSVGElement.setCurrentTime()

Passt die Uhr für dieses SVG-Dokumentfragment an und stellt eine neue aktuelle Zeit ein. Wenn setCurrentTime() aufgerufen wird, bevor die Dokumentzeitachse begonnen hat (zum Beispiel durch ein Skript, das in einem <script>-Element ausgeführt wird, bevor das SVGLoad-Ereignis des Dokuments abgesendet wird), gibt der Wert der Sekunden im letzten Aufruf dieser Methode die Zeit an, zu der das Dokument zurückspringt, sobald die Dokumentzeitachse begonnen hat.

SVGSVGElement.getIntersectionList()

Gibt eine NodeList von Grafikelementen zurück, deren gerenderter Inhalt das angegebene Rechteck schneidet. Jedes in Frage kommende Grafikelement ist nur dann als Übereinstimmung zu betrachten, wenn dasselbe Grafikelement ein Ziel von Zeigerereignissen im Sinne der pointer-events-Verarbeitung sein kann.

SVGSVGElement.getEnclosureList()

Gibt eine NodeList von Grafikelementen zurück, deren gerenderter Inhalt vollständig innerhalb des angegebenen Rechtecks enthalten ist. Jedes in Frage kommende Grafikelement ist nur dann als Übereinstimmung zu betrachten, wenn dasselbe Grafikelement ein Ziel von Zeigerereignissen im Sinne der pointer-events-Verarbeitung sein kann.

SVGSVGElement.checkIntersection()

Gibt true zurück, wenn der gerenderte Inhalt des angegebenen Elements das angegebene Rechteck schneidet. Jedes in Frage kommende Grafikelement ist nur dann als Übereinstimmung zu betrachten, wenn dasselbe Grafikelement ein Ziel von Zeigerereignissen im Sinne der pointer-events-Verarbeitung sein kann.

SVGSVGElement.checkEnclosure()

Gibt true zurück, wenn der gerenderte Inhalt des angegebenen Elements vollständig im angegebenen Rechteck enthalten ist. Jedes in Frage kommende Grafikelement ist nur dann als Übereinstimmung zu betrachten, wenn dasselbe Grafikelement ein Ziel von Zeigerereignissen im Sinne der pointer-events-Verarbeitung sein kann.

SVGSVGElement.deselectAll()

Hebt die Auswahl aller ausgewählten Objekte auf, einschließlich aller Auswahl von Textzeichenfolgen und Tipp-Eingabebalken.

SVGSVGElement.createSVGNumber()

Erstellt ein SVGNumber-Objekt außerhalb von Dokumentbäumen. Das Objekt wird auf 0 initialisiert.

SVGSVGElement.createSVGLength()

Erstellt ein SVGLength-Objekt außerhalb von Dokumentbäumen. Das Objekt wird auf 0 Benutzereinheiten initialisiert.

SVGSVGElement.createSVGAngle()

Erstellt ein SVGAngle-Objekt außerhalb von Dokumentbäumen. Das Objekt wird auf einen Wert von 0 Grad (ohne Einheit) initialisiert.

SVGSVGElement.createSVGPoint()

Erstellt ein SVGPoint-Objekt außerhalb von Dokumentbäumen. Das Objekt wird auf den Punkt (0,0) im Benutzerkoordinatensystem initialisiert.

SVGSVGElement.createSVGMatrix()

Erstellt ein SVGMatrix-Objekt außerhalb von Dokumentbäumen. Das Objekt wird auf die Einheitsmatrix initialisiert.

SVGSVGElement.createSVGRect()

Erstellt ein SVGRect-Objekt außerhalb von Dokumentbäumen. Das Objekt wird so initialisiert, dass alle Werte auf 0 Benutzereinheiten gesetzt sind.

SVGSVGElement.createSVGTransform()

Erstellt ein SVGTransform-Objekt außerhalb von Dokumentbäumen. Das Objekt wird auf eine Identitätsmatrix-Transformation (SVG_TRANSFORM_MATRIX) initialisiert.

SVGSVGElement.createSVGTransformFromMatrix()

Erstellt ein SVGTransform-Objekt außerhalb von Dokumentbäumen. Das Objekt wird auf die gegebene Matrix-Transformation (d.h. SVG_TRANSFORM_MATRIX) initialisiert. Die Werte der Parameter-Matrix werden kopiert, die Matrix-Parameter werden nicht als SVGTransform::matrix übernommen.

SVGSVGElement.getElementById()

Durchsucht dieses SVG-Dokumentfragment (d.h. die Suche beschränkt sich auf einen Teilbaum des Dokuments) nach einem Element, dessen id durch elementId angegeben wird. Wenn ein Element gefunden wird, wird dieses Element zurückgegeben. Wenn kein solches Element existiert, wird null zurückgegeben. Das Verhalten ist nicht definiert, wenn mehr als ein Element diese id hat.

Ereignis-Handler

Die folgenden Window onXYZ Ereignis-Handler-Eigenschaften sind auch als Aliase verfügbar, die auf das window-Objekt abzielen. Es wird jedoch empfohlen, sie direkt auf dem window-Objekt anstatt auf SVGSVGElement zu hören.

Hinweis: Die Verwendung von addEventListener() auf SVGSVGElement funktioniert nicht für die unten aufgeführten onXYZ Ereignis-Handler. Hören Sie stattdessen die Ereignisse auf dem window-Objekt ab.

SVGSVGElement.onafterprint

Wird ausgelöst, nachdem das zugehörige Dokument mit dem Drucken begonnen hat oder die Druckvorschau geschlossen wurde.

SVGSVGElement.onbeforeprint

Wird ausgelöst, wenn das zugehörige Dokument gedruckt oder zur Druckvorschau geöffnet werden soll.

SVGSVGElement.onbeforeunload

Wird ausgelöst, wenn das Fenster, das Dokument und seine Ressourcen entladen werden sollen.

SVGSVGElement.ongamepadconnected

Wird ausgelöst, wenn der Browser erkennt, dass ein Gamepad angeschlossen wurde oder zum ersten Mal ein Button/eine Achse des Gamepads verwendet wird.

SVGSVGElement.ongamepaddisconnected

Wird ausgelöst, wenn der Browser erkennt, dass ein Gamepad getrennt wurde.

SVGSVGElement.onhashchange

Wird ausgelöst, wenn sich der Fragmentbezeichner der URL geändert hat (der Teil der URL, der mit dem #-Symbol beginnt und folgt).

SVGSVGElement.onlanguagechange

Wird ausgelöst, wenn sich die bevorzugte Sprache des Benutzers ändert.

SVGSVGElement.onmessage

Wird ausgelöst, wenn das Fenster eine Nachricht empfängt, zum Beispiel durch einen Aufruf von Window.postMessage() aus einem anderen Browsing-Kontext.

SVGSVGElement.onmessageerror

Wird ausgelöst, wenn das Fenster eine Nachricht erhält, die nicht deserialisiert werden kann.

SVGSVGElement.onoffline

Wird ausgelöst, wenn der Browser den Zugang zum Netzwerk verloren hat und der Wert von Navigator.onLine auf false wechselt.

SVGSVGElement.ononline

Wird ausgelöst, wenn der Browser den Zugang zum Netzwerk erlangt hat und der Wert von Navigator.onLine auf true wechselt.

SVGSVGElement.onpagehide

Wird ausgelöst, wenn der Browser die aktuelle Seite ausblendet, um eine andere Seite aus der Sitzungsgeschichte anzuzeigen.

SVGSVGElement.onpageshow

Wird ausgelöst, wenn der Browser das Dokument des Fensters aufgrund einer Navigation anzeigt.

SVGSVGElement.onpopstate

Wird ausgelöst, wenn der aktuelle Verlaufseintrag geändert wird, während der Benutzer durch die Verlaufssitzung navigiert.

SVGSVGElement.onrejectionhandled

Wird jedes Mal ausgelöst, wenn ein JavaScript Promise abgelehnt wird und die Ablehnung gehandhabt wurde.

SVGSVGElement.onstorage

Wird ausgelöst, wenn ein Speicherbereich (localStorage) im Kontext eines anderen Dokuments geändert wurde.

SVGSVGElement.onunhandledrejection

Wird jedes Mal ausgelöst, wenn ein Promise abgelehnt wird, die Ablehnung jedoch nicht gehandhabt wurde.

SVGSVGElement.onunload

Wird ausgelöst, wenn das Dokument entladen wird.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGSVGElement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch