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.

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.

EventTarget Node Element SVGElement SVGGraphicsElement SVGSVGElement

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von seinem übergeordneten SVGGraphicsElement.

SVGSVGElement.x Schreibgeschützt

Ein SVGAnimatedLength, der mit dem x-Attribut des angegebenen <svg>-Elements korrespondiert.

SVGSVGElement.y Schreibgeschützt

Ein SVGAnimatedLength, der mit dem y-Attribut des angegebenen <svg>-Elements korrespondiert.

SVGSVGElement.width Schreibgeschützt

Ein SVGAnimatedLength, der mit dem width-Attribut des angegebenen <svg>-Elements korrespondiert.

SVGSVGElement.height Schreibgeschützt

Ein SVGAnimatedLength, der mit dem height-Attribut des angegebenen <svg>-Elements korrespondiert.

SVGSVGElement.viewBox Schreibgeschützt

Ein SVGAnimatedRect, der mit dem viewBox-Attribut des angegebenen <svg>-Elements korrespondiert.

SVGSVGElement.preserveAspectRatio Schreibgeschützt

Ein SVGAnimatedPreserveAspectRatio, der mit dem preserveAspectRatio-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 wie viewBox oder einer "benutzerdefinierten" Ansicht (d.h. ein Hyperlink in ein bestimmtes <view> oder anderes Element). Wenn die initiale Ansicht die "Standard"-Ansicht ist, ist dieses Attribut false. Wenn die initiale Ansicht eine "benutzerdefinierte" Ansicht ist, ist dieses Attribut true.

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, preserveAspectRatio und zoomAndPan innerhalb von currentView mit den Werten der entsprechenden DOM-Attribute direkt auf SVGSVGElement überein
  • ist der Wert für transform innerhalb von currentView null

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

  • stimmen die Werte für viewBox, preserveAspectRatio und zoomAndPan innerhalb von currentView mit den entsprechenden Attributen des gegebenen <view>-Elements überein
  • ist der Wert für transform innerhalb von currentView null

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

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

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, zoomAndPan und transform innerhalb von currentView den Werten des SVG-View-Spezifikations-Fragmentbezeichners
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-Attribute currentScale und currentTranslate sind ä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.currentTranslate Schreibgeschü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, ein unsuspendRedrawAll()-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() und unsuspendRedraw() 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:

js
const suspendHandleID = suspendRedraw(maxWaitMilliseconds);

und folgen Sie den Änderungen mit einem Methodenaufruf, der ähnlich ist wie:

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()

Hebt ein spezifisches suspendRedraw() auf, indem eine eindeutige Suspend-Handle-ID angegeben wird, die in einem vorherigen suspendRedraw()-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 ausstehenden suspendRedraw()-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 true zurü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 das SVGLoad-Ereignis des Dokuments ausgelöst wird), wird 0 zurü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 das SVGLoad-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 NodeList von 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 von pointer-events definiert.

SVGSVGElement.getEnclosureList()

Gibt eine NodeList von 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 von pointer-events definiert.

SVGSVGElement.checkIntersection()

Gibt true zurü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 von pointer-events definiert.

SVGSVGElement.checkEnclosure()

Gibt true zurü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 von pointer-events definiert.

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 auf 0 initialisiert.

SVGSVGElement.createSVGLength()

Erstellt ein SVGLength-Objekt außerhalb eines Dokumentbaums. Das Objekt wird auf 0 Benutzereinheiten initialisiert.

SVGSVGElement.createSVGAngle()

Erstellt ein SVGAngle-Objekt außerhalb eines Dokumentbaums. Das Objekt wird auf einen Wert von 0 Grad (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 auf 0 Benutzereinheiten 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 als SVGTransform::matrix übernommen.

SVGSVGElement.getElementById()

Durchsucht dieses SVG-Dokumentfragment (d.h. die Suche ist auf einen Teilbaum des Dokumentbaums 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 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.onLine auf false wechselt.

SVGSVGElement.ononline

Ausgelöst, wenn der Browser wieder Zugang zum Netzwerk hat und der Wert von Navigator.onLine auf true wechselt.

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-Promise abgelehnt 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 Promise abgelehnt, aber die Ablehnung nicht behandelt wurde.

SVGSVGElement.onunload

Ausgelöst, wenn das Dokument entladen wird.

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2
# InterfaceSVGSVGElement

Browser-Kompatibilität

Siehe auch