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.

* Some parts of this feature may have varying levels of support.

Das SVGSVGElement Interface bietet Zugriff auf die Eigenschaften von <svg>-Elementen sowie Methoden, um diese zu manipulieren. Dieses Interface enthält auch verschiedene, häufig verwendete Dienstmethoden, wie Matrixoperationen und die Möglichkeit, die Zeit für das Neuzeichnen auf visuellen Ausgabegeräten zu steuern.

EventTarget Node Element SVGElement SVGGraphicsElement SVGSVGElement

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von seinem 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.viewBox Schreibgeschützt

Ein SVGAnimatedRect, das dem viewBox Attribut des angegebenen <svg>-Elements entspricht.

SVGSVGElement.preserveAspectRatio Schreibgeschützt

Ein SVGAnimatedPreserveAspectRatio, das dem preserveAspectRatio Attribut des angegebenen <svg>-Elements entspricht.

SVGSVGElement.pixelUnitToMillimeterX Veraltet

Ein Float-Wert, der die Größe der Pixeleinheit (wie in CSS2 definiert) entlang der x-Achse des Viewports darstellt, welcher eine Einheit im Bereich von 70dpi bis 120dpi repräsentiert und auf Systemen, die das unterstützen, tatsächlich den Eigenschaften des Zielmediums entsprechen kann. Auf Systemen, wo es unmöglich ist, die Größe eines Pixels zu kennen, wird eine geeignete Standard-Pixelgröße bereitgestellt.

SVGSVGElement.pixelUnitToMillimeterY Veraltet

Ein Float-Wert, 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 angegebene UI-Ereignis aufgetreten ist. Wenn der Browser tatsächlich die physische Größe einer "Bildschirmeinheit" kennt, drückt dieses Float-Attribut diese Information aus; andernfalls stellen die Benutzeragenten einen geeigneten Standardwert bereit (zum Beispiel .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 Verschiebung) des aktuellen innersten SVG-Dokumentfragments kann entweder die "Standard"-Ansicht sein, d.h. basierend auf Attributen auf dem <svg>-Element wie viewBox, oder eine "benutzerdefinierte" Ansicht sein (d.h. ein Hyperlink zu einem bestimmten <view> oder einem anderen Element). 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 definiert die initiale Ansicht (d.h. vor Vergrößerung und Verschiebung) des aktuellen innersten SVG-Dokumentfragments. 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 (d.h. außer einem <view>) war, dann:

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

SVGSVGElement.currentScale

Bei einem äußersten <svg>-Element zeigt dieses Float-Attribut den aktuellen Skalierungsfaktor relativ zur initialen Ansicht an, um Benutzerskalierung und Verschiebungsoperationen zu berücksichtigen. DOM-Attribute currentScale und currentTranslate sind gleichwertig 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 ist der Effekt so, als ob eine zusätzliche Transformation auf der äußersten Ebene im SVG-Dokumentfragment platziert wäre (d.h. außerhalb des äußersten <svg>-Elements).

SVGSVGElement.currentTranslate Schreibgeschützt

Ein SVGPoint, das den Translationsfaktor darstellt, um die Benutzer-"Vergrößerung" zu berücksichtigen, entsprechend einem äußersten <svg>-Element. Das Verhalten ist für <svg>-Elemente, die nicht auf der äußersten Ebene sind, nicht definiert.

Instanz-Methoden

Dieses Interface erbt auch Methoden von seinem Elternteil, SVGGraphicsElement.

SVGSVGElement.suspendRedraw() Veraltet

Akzeptiert einen Zeitwert, welcher angibt, dass kein Neuzeichnen erfolgen soll, bis:

der entsprechende unsuspendRedraw() Aufruf gemacht wurde, ein unsuspendRedrawAll() Aufruf gemacht wurde oder sein Timer abgelaufen ist.

In Umgebungen, die keine Interaktivität unterstützen (z.B. Druckmedien), soll das Neuzeichnen nicht ausgesetzt werden. Aufrufe von suspendRedraw() und unsuspendRedraw() sollten in ausbalancierten Paaren gemacht werden, aber müssen es nicht.

Um Neuzeichnungsaktionen auszusetzen, während eine Sammlung von Änderungen am SVG-DOM durchgeführt wird, sollten Sie die Änderungen am SVG-DOM mit einem Methodenaufruf wie folgt einleiten:

js
const suspendHandleID = suspendRedraw(maxWaitMilliseconds);

und die Änderungen mit einem Methodenaufruf wie folgt abschließen:

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 ein angegebenes suspendRedraw() auf, indem es eine eindeutige Suspend-Handle-ID bereitstellt, die von einem vorherigen suspendRedraw()-Aufruf zurückgegeben wurde.

SVGSVGElement.unsuspendRedrawAll() Veraltet

Hebt alle aktuell aktiven suspendRedraw() Methodenaufrufe auf. Diese Methode ist am nützlichsten am Ende einer Reihe von SVG-DOM-Aufrufen, um sicherzustellen, dass alle anstehenden suspendRedraw() Methodenaufrufe aufgehoben wurden.

SVGSVGElement.forceRedraw() Veraltet

In Renderumgebungen, die Interaktivität unterstützen, zwingt dieser Aufruf den Benutzeragenten dazu, sofort alle Bereiche des Viewports neu zu zeichnen, die aktualisiert werden müssen.

SVGSVGElement.pauseAnimations()

Hält alle aktuell laufenden Animationen an, die innerhalb des SVG-Dokumentfragments definiert sind, das diesem <svg>-Element entspricht, wodurch die Animationsuhr, die diesem Dokumentfragment entspricht, stillsteht, bis sie fortgesetzt wird.

SVGSVGElement.unpauseAnimations()

Setzt derzeit laufende Animationen fort, die innerhalb des SVG-Dokumentfragments definiert sind, wodurch die Animationsuhr ab dem Zeitpunkt weiterläuft, zu dem sie angehalten wurde.

SVGSVGElement.animationsPaused()

Gibt true zurück, wenn dieses SVG-Dokumentfragment sich in einem angehaltenen Zustand befindet.

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 Dokument-Zeitachse begonnen hat (zum Beispiel durch ein Skript, das in einem <script>-Element ausgeführt wird, bevor das SVGLoad-Ereignis des Dokuments ausgelöst 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 Dokument-Zeitachse begonnen hat (zum Beispiel durch ein Skript, das in einem <script>-Element ausgeführt wird, bevor das SVGLoad-Ereignis des Dokuments ausgelöst wird), gibt der Sekundenwert im letzten Aufruf der Methode die Zeit an, zu der das Dokument sich bewegen wird, sobald die Dokument-Zeitachse begonnen hat.

SVGSVGElement.getIntersectionList()

Gibt eine NodeList von Grafikelementen zurück, deren gerenderter Inhalt das angegebene Rechteck schneidet. Jedes Kandidaten-Grafikelement wird nur dann als übereinstimmend betrachtet, wenn dasselbe Grafikelement ein Ziel für Zeigereignisse gemäß der Verarbeitung von pointer-events sein kann.

SVGSVGElement.getEnclosureList()

Gibt eine NodeList von Grafikelementen zurück, deren gerenderter Inhalt vollständig innerhalb des angegebenen Rechtecks enthalten ist. Jedes Kandidaten-Grafikelement wird nur dann als übereinstimmend betrachtet, wenn dasselbe Grafikelement ein Ziel für Zeigereignisse gemäß der Verarbeitung von pointer-events sein kann.

SVGSVGElement.checkIntersection()

Gibt true zurück, wenn der gerenderte Inhalt des angegebenen Elements das angegebene Rechteck schneidet. Jedes Kandidaten-Grafikelement wird nur dann als übereinstimmend betrachtet, wenn dasselbe Grafikelement ein Ziel für Zeigereignisse gemäß der Verarbeitung von pointer-events sein kann.

SVGSVGElement.checkEnclosure()

Gibt true zurück, wenn der gerenderte Inhalt des angegebenen Elements vollständig innerhalb des angegebenen Rechtecks enthalten ist. Jedes Kandidaten-Grafikelement wird nur dann als übereinstimmend betrachtet, wenn dasselbe Grafikelement ein Ziel für Zeigereignisse gemäß der Verarbeitung von pointer-events sein kann.

SVGSVGElement.deselectAll()

Hebt die Auswahl jeglicher ausgewählter Objekte auf, einschließlich jeglicher Auswahl von Textzeichenfolgen und Eingabebalken.

SVGSVGElement.createSVGNumber()

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

SVGSVGElement.createSVGLength()

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

SVGSVGElement.createSVGAngle()

Erstellt ein SVGAngle-Objekt außerhalb jeglicher Dokumentbäume. Das Objekt wird auf einen Wert von 0 Grad (einheitenlos) initialisiert.

SVGSVGElement.createSVGPoint()

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

SVGSVGElement.createSVGMatrix()

Erstellt ein DOMMatrix-Objekt außerhalb jeglicher Dokumentbäume. Das Objekt wird auf die Identitätsmatrix initialisiert.

SVGSVGElement.createSVGRect()

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

SVGSVGElement.createSVGTransform()

Erstellt ein SVGTransform-Objekt außerhalb jeglicher Dokumentbäume. Das Objekt wird auf eine Identitätsmatrixtransformation (SVG_TRANSFORM_MATRIX) initialisiert.

SVGSVGElement.createSVGTransformFromMatrix()

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

SVGSVGElement.getElementById()

Durchsucht dieses SVG-Dokumentfragment (d.h. die Suche ist auf einen Teilbaum des Dokuments beschränkt) 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-Ereignishandler-Eigenschaften stehen auch als Aliase für das window-Objekt zur Verfügung. Es wird jedoch empfohlen, sie direkt am window-Objekt zu überwachen, anstatt am SVGSVGElement.

Hinweis: Die Verwendung von addEventListener() am SVGSVGElement funktioniert nicht für die unten aufgeführten onXYZ-Ereignishandler. Überwachen Sie die Ereignisse stattdessen am window-Objekt.

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 für den Druck vorangesehen wird.

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 oder zum ersten Mal ein Button/eine Achse des Gamepads betätigt wurde.

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 darauf folgt).

SVGSVGElement.onlanguagechange

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

SVGSVGElement.onmessage

Wird ausgelöst, wenn das Fenster eine Nachricht erhält, zum Beispiel von einem Aufruf an 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 verliert und der Wert von Navigator.onLine auf false umschaltet.

SVGSVGElement.ononline

Wird ausgelöst, wenn der Browser Zugang zum Netzwerk erhält und der Wert von Navigator.onLine auf true umschaltet.

SVGSVGElement.onpagehide

Wird ausgelöst, wenn der Browser die aktuelle Seite ausblendet, während er eine andere Seite aus dem Sitzungsverlauf präsentiert.

SVGSVGElement.onpageshow

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

SVGSVGElement.onpopstate

Wird ausgelöst, wenn der aktive Verlaufseintrag geändert wird, während der Benutzer den Sitzungsverlauf 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, aber die Ablehnung nicht gehandhabt wurde.

SVGSVGElement.onunload

Wird ausgelöst, wenn das Dokument entladen wird.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGSVGElement

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
SVGSVGElement
animationsPaused
checkEnclosure
checkIntersection
createSVGAngle
createSVGLength
createSVGMatrix
createSVGNumber
createSVGPoint
createSVGRect
createSVGTransform
createSVGTransformFromMatrix
currentScale
currentTranslate
currentView
DeprecatedNon-standard
deselectAll
forceRedraw
Deprecated
getCurrentTime
getElementById
getEnclosureList
getIntersectionList
height
pauseAnimations
preserveAspectRatio
setCurrentTime
suspendRedraw
Deprecated
unpauseAnimations
unsuspendRedraw
Deprecated
unsuspendRedrawAll
Deprecated
useCurrentView
DeprecatedNon-standard
viewBox
width
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.

Siehe auch