Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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.

Die Schnittstelle SVGSVGElement bietet Zugriff auf die Eigenschaften von <svg>-Elementen sowie Methoden zu deren Bearbeitung. Sie enthält außerdem verschiedene häufig verwendete Hilfsmethoden, etwa für Matrixoperationen und zur Steuerung des Zeitpunkts, zu dem die Darstellung auf visuellen Ausgabegeräten neu gezeichnet wird.

EventTarget Node Element SVGElement SVGGraphicsElement SVGSVGElement

Instanzeigenschaften

Diese Schnittstelle erbt außerdem Eigenschaften von ihrer übergeordneten Schnittstelle SVGGraphicsElement.

SVGSVGElement.x Schreibgeschützt

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

SVGSVGElement.y Schreibgeschützt

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

SVGSVGElement.width Schreibgeschützt

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

SVGSVGElement.height Schreibgeschützt

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

SVGSVGElement.viewBox Schreibgeschützt

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

SVGSVGElement.preserveAspectRatio Schreibgeschützt

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

SVGSVGElement.pixelUnitToMillimeterX Schreibgeschützt

Eine Gleitkommazahl, die die Größe der Pixeleinheit (gemäß CSS2) entlang der x-Achse des Viewports angibt. Diese Einheit liegt im Bereich von 70 bis 120 dpi und kann auf Systemen, die dies unterstützen, den tatsächlichen Eigenschaften des Zielmediums entsprechen. Auf Systemen, auf denen die Größe eines Pixels nicht bestimmt werden kann, wird ein geeigneter Standardwert bereitgestellt.

SVGSVGElement.pixelUnitToMillimeterY Schreibgeschützt

Eine Gleitkommazahl, die die Größe einer Pixeleinheit entlang der y-Achse des Viewports angibt.

SVGSVGElement.screenPixelToMillimeterX Schreibgeschützt

UI-Ereignisse in DOM Level 2 geben die Bildschirmposition an, an der das jeweilige Ereignis aufgetreten ist. Wenn der Browser die physische Größe einer „Bildschirmeinheit“ kennt, gibt dieses Gleitkommaattribut sie an. Andernfalls stellen User Agents einen geeigneten Standardwert bereit (beispielsweise .28mm).

SVGSVGElement.screenPixelToMillimeterY Schreibgeschützt

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

SVGSVGElement.useCurrentView Schreibgeschützt

Die Ausgangsansicht (also vor Vergrößerung und Verschiebung) des aktuellen innersten SVG-Dokumentfragments kann entweder die „Standardansicht“ sein, die auf Attributen des <svg>-Elements wie viewBox basiert, oder eine „benutzerdefinierte“ Ansicht, die beispielsweise durch einen Hyperlink auf ein bestimmtes <view>-Element oder ein anderes Element festgelegt wird. Bei einer Standardansicht ist dieses Attribut false, bei einer benutzerdefinierten Ansicht true.

SVGSVGElement.currentView Schreibgeschützt

Eine SVGViewSpec, die die Ausgangsansicht (also vor Vergrößerung und Verschiebung) des aktuellen innersten SVG-Dokumentfragments definiert. Die Bedeutung hängt von der jeweiligen Situation ab. War die Ausgangsansicht eine Standardansicht, gilt:

  • Die Werte von viewBox, preserveAspectRatio und zoomAndPan in currentView stimmen mit den Werten der entsprechenden DOM-Attribute direkt auf SVGSVGElement überein.
  • Der Wert von transform in currentView ist null.

War die Ausgangsansicht ein Link auf ein <view>-Element, gilt:

  • Die Werte von viewBox, preserveAspectRatio und zoomAndPan in currentView entsprechen den jeweiligen Attributen des betreffenden <view>-Elements.
  • Der Wert von transform in currentView ist null.

War die Ausgangsansicht ein Link auf ein anderes Element als ein <view>-Element, gilt:

  • Die Werte von viewBox, preserveAspectRatio und zoomAndPan in currentView stimmen mit den Werten der entsprechenden DOM-Attribute direkt auf SVGSVGElement für das nächstgelegene übergeordnete <svg>-Element überein.
  • Der Wert von transform in currentView ist null.

War die Ausgangsansicht ein Link auf das SVG-Dokumentfragment mit einem Fragmentbezeichner gemäß der SVG-Ansichtsspezifikation (also #svgView(…)), gilt:

  • Die Werte von viewBox, preserveAspectRatio, zoomAndPan und transform in currentView entsprechen den Werten aus diesem Fragmentbezeichner.
SVGSVGElement.currentScale

Bei einem äußersten <svg>-Element gibt dieses Gleitkommaattribut den aktuellen Skalierungsfaktor relativ zur Ausgangsansicht an und berücksichtigt dabei Vergrößerungs- und Verschiebevorgänge durch Benutzer. Die DOM-Attribute currentScale und currentTranslate entsprechen der 2×3-Matrix [a b c d e f] = [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]. Wenn die Vergrößerung aktiviert ist (also zoomAndPan="magnify"), entspricht der Effekt einer zusätzlichen Transformation auf der äußersten Ebene des SVG-Dokumentfragments (also außerhalb des äußersten <svg>-Elements).

SVGSVGElement.currentTranslate Schreibgeschützt

Ein DOMPointReadOnly, das den Verschiebungsfaktor darstellt, der die Vergrößerung durch Benutzer für ein äußerstes <svg>-Element berücksichtigt. Für <svg>-Elemente, die sich nicht auf der äußersten Ebene befinden, ist das Verhalten nicht definiert.

Instanzmethoden

Diese Schnittstelle erbt außerdem Methoden von ihrer übergeordneten Schnittstelle SVGGraphicsElement.

SVGSVGElement.suspendRedraw()

Nimmt einen Timeout-Wert entgegen, der angibt, dass die Darstellung erst dann neu gezeichnet werden soll, wenn:

der zugehörige Aufruf von unsuspendRedraw() oder ein Aufruf von unsuspendRedrawAll() erfolgt ist oder der Timeout abgelaufen ist.

In Umgebungen ohne Interaktivität (beispielsweise Printmedien) soll das Neuzeichnen nicht ausgesetzt werden. Aufrufe von suspendRedraw() und unsuspendRedraw() sollten, müssen aber nicht, paarweise erfolgen.

Um das Neuzeichnen während einer Reihe von Änderungen am SVG-DOM auszusetzen, stellen Sie den Änderungen einen Methodenaufruf wie den folgenden voran:

js
const suspendHandleID = suspendRedraw(maxWaitMilliseconds);

Fügen Sie nach den Änderungen einen Methodenaufruf wie den folgenden hinzu:

js
unsuspendRedraw(suspendHandleID);

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

SVGSVGElement.unsuspendRedraw()

Hebt einen bestimmten Aufruf von suspendRedraw() auf. Dazu wird die eindeutige Handle-ID übergeben, die ein vorheriger Aufruf von suspendRedraw() zurückgegeben hat.

SVGSVGElement.unsuspendRedrawAll()

Hebt alle derzeit aktiven Aufrufe von suspendRedraw() auf. Diese Methode ist besonders am Ende einer Reihe von SVG-DOM-Aufrufen nützlich, um sicherzustellen, dass alle noch ausstehenden Aufrufe von suspendRedraw() aufgehoben wurden.

SVGSVGElement.forceRedraw()

Erzwingt in interaktiven Darstellungsumgebungen, dass der User Agent alle zu aktualisierenden Bereiche des Viewports sofort neu zeichnet.

SVGSVGElement.pauseAnimations()

Setzt alle derzeit laufenden Animationen im SVG-Dokumentfragment des betreffenden <svg>-Elements aus. Die Animationsuhr dieses Dokumentfragments bleibt stehen, bis die Animationen fortgesetzt werden.

SVGSVGElement.unpauseAnimations()

Setzt die laufenden Animationen im SVG-Dokumentfragment fort. Die Animationsuhr läuft ab dem Zeitpunkt weiter, an dem sie angehalten wurde.

SVGSVGElement.animationsPaused()

Gibt true zurück, wenn die Animationen dieses SVG-Dokumentfragments angehalten sind.

SVGSVGElement.getCurrentTime()

Gibt die aktuelle Zeit in Sekunden relativ zum Startzeitpunkt des aktuellen SVG-Dokumentfragments zurück. Wird getCurrentTime() aufgerufen, bevor die Dokument-Zeitleiste begonnen hat (beispielsweise durch ein Skript in einem <script>-Element, bevor das SVGLoad-Ereignis des Dokuments ausgelöst wird), wird 0 zurückgegeben.

SVGSVGElement.setCurrentTime()

Stellt die Uhr für dieses SVG-Dokumentfragment ein und legt damit eine neue aktuelle Zeit fest. Wird setCurrentTime() aufgerufen, bevor die Dokument-Zeitleiste begonnen hat (beispielsweise durch ein Skript in einem <script>-Element, bevor das SVGLoad-Ereignis des Dokuments ausgelöst wird), bestimmt der Sekundenwert des letzten Methodenaufrufs, zu welchem Zeitpunkt das Dokument springt, sobald die Dokument-Zeitleiste beginnt.

SVGSVGElement.getIntersectionList()

Gibt eine NodeList mit Grafikelementen zurück, deren dargestellter Inhalt das angegebene Rechteck schneidet. Ein infrage kommendes Grafikelement gilt nur dann als Treffer, wenn es gemäß der Verarbeitung von pointer-events Ziel von Pointer-Ereignissen sein kann.

SVGSVGElement.getEnclosureList()

Gibt eine NodeList mit Grafikelementen zurück, deren dargestellter Inhalt vollständig innerhalb des angegebenen Rechtecks liegt. Ein infrage kommendes Grafikelement gilt nur dann als Treffer, wenn es gemäß der Verarbeitung von pointer-events Ziel von Pointer-Ereignissen sein kann.

SVGSVGElement.checkIntersection()

Gibt true zurück, wenn der dargestellte Inhalt des angegebenen Elements das angegebene Rechteck schneidet. Ein infrage kommendes Grafikelement gilt nur dann als Treffer, wenn es gemäß der Verarbeitung von pointer-events Ziel von Pointer-Ereignissen sein kann.

SVGSVGElement.checkEnclosure()

Gibt true zurück, wenn der dargestellte Inhalt des angegebenen Elements vollständig innerhalb des angegebenen Rechtecks liegt. Ein infrage kommendes Grafikelement gilt nur dann als Treffer, wenn es gemäß der Verarbeitung von pointer-events Ziel von Pointer-Ereignissen sein kann.

SVGSVGElement.deselectAll()

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

SVGSVGElement.createSVGNumber()

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

SVGSVGElement.createSVGLength()

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

SVGSVGElement.createSVGAngle()

Erstellt ein SVGAngle-Objekt außerhalb aller Dokumentbäume. Das Objekt wird mit einem Wert von 0 Grad (ohne Einheit) initialisiert.

SVGSVGElement.createSVGPoint()

Erstellt ein DOMPoint-Objekt außerhalb aller Dokumentbäume. Das Objekt wird mit dem Punkt (0,0) im Benutzerkoordinatensystem initialisiert.

SVGSVGElement.createSVGMatrix()

Erstellt ein DOMMatrix-Objekt außerhalb aller Dokumentbäume. Das Objekt wird mit der Einheitsmatrix initialisiert.

SVGSVGElement.createSVGRect()

Erstellt ein SVGRect-Objekt außerhalb aller Dokumentbäume. Alle Werte des Objekts werden mit 0 Benutzereinheiten initialisiert.

SVGSVGElement.createSVGTransform()

Erstellt ein SVGTransform-Objekt außerhalb aller Dokumentbäume. Das Objekt wird mit einer Einheitsmatrix-Transformation (SVG_TRANSFORM_MATRIX) initialisiert.

SVGSVGElement.createSVGTransformFromMatrix()

Erstellt ein SVGTransform-Objekt außerhalb aller Dokumentbäume. Das Objekt wird mit der angegebenen Matrixtransformation (SVG_TRANSFORM_MATRIX) initialisiert. Die Werte der als Parameter übergebenen Matrix werden kopiert; die Matrix selbst wird nicht als SVGTransform::matrix übernommen.

SVGSVGElement.getElementById()

Durchsucht dieses SVG-Dokumentfragment – also nur einen Teil des Dokumentbaums – nach einem Element, dessen id dem Wert von elementId entspricht. Wird ein Element gefunden, wird es zurückgegeben. Andernfalls wird null zurückgegeben. Das Verhalten ist nicht definiert, wenn mehrere Elemente dieselbe id haben.

Ereignisbehandler

Die folgenden onXYZ-Ereignisbehandler-Eigenschaften von Window sind auch als Aliase verfügbar, die auf das window-Objekt verweisen. Es wird jedoch empfohlen, die Ereignisse direkt auf dem window-Objekt statt auf SVGSVGElement zu überwachen.

Hinweis: addEventListener() auf SVGSVGElement funktioniert für die unten aufgeführten onXYZ-Ereignisbehandler nicht. Überwachen Sie die Ereignisse stattdessen auf dem window-Objekt.

SVGSVGElement.onafterprint

Wird ausgelöst, nachdem der Druck des zugehörigen Dokuments begonnen hat oder die Druckvorschau geschlossen wurde.

SVGSVGElement.onbeforeprint

Wird ausgelöst, wenn das zugehörige Dokument gedruckt oder in der Druckvorschau angezeigt werden soll.

SVGSVGElement.onbeforeunload

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

SVGSVGElement.ongamepadconnected

Wird ausgelöst, wenn der Browser erkennt, dass ein Gamepad verbunden wurde, oder wenn erstmals eine Taste oder 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 ändert (der Teil der URL, der mit dem Zeichen # beginnt).

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, beispielsweise durch einen Aufruf von Window.postMessage() aus einem anderen Browsing Context.

SVGSVGElement.onmessageerror

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

SVGSVGElement.onoffline

Wird ausgelöst, wenn der Browser den Netzwerkzugriff verloren hat und der Wert von Navigator.onLine zu false wechselt.

SVGSVGElement.ononline

Wird ausgelöst, wenn der Browser Netzwerkzugriff erhält und der Wert von Navigator.onLine zu true wechselt.

SVGSVGElement.onpagehide

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

SVGSVGElement.onpageshow

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

SVGSVGElement.onpopstate

Wird ausgelöst, wenn sich der aktive Verlaufseintrag ändert, während der Benutzer durch den Sitzungsverlauf navigiert.

SVGSVGElement.onrejectionhandled

Wird ausgelöst, wenn eine JavaScript-Promise abgelehnt wurde und die Ablehnung behandelt wurde.

SVGSVGElement.onstorage

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

SVGSVGElement.onunhandledrejection

Wird ausgelöst, wenn eine Promise abgelehnt wurde, die Ablehnung aber nicht behandelt wurde.

SVGSVGElement.onunload

Wird ausgelöst, wenn das Dokument entladen wird.

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2
# InterfaceSVGSVGElement

Browser-Kompatibilität

Siehe auch