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.
Instanzeigenschaften
Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, SVGGraphicsElement
.
SVGSVGElement.x
Nur lesbar-
Ein
SVGAnimatedLength
, das demx
Attribut des angegebenen<svg>
Elements entspricht. SVGSVGElement.y
Nur lesbar-
Ein
SVGAnimatedLength
, das demy
Attribut des angegebenen<svg>
Elements entspricht. SVGSVGElement.width
Nur lesbar-
Ein
SVGAnimatedLength
, das demwidth
Attribut des angegebenen<svg>
Elements entspricht. SVGSVGElement.height
Nur lesbar-
Ein
SVGAnimatedLength
, das demheight
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 wieviewBox
) 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 Attributfalse
. Wenn die initiale Ansicht eine „benutzerdefinierte“ Ansicht ist, dann ist dieses Attributtrue
. 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:- entsprechen die Werte für
viewBox
,preserveAspectRatio
undzoomAndPan
innerhalb voncurrentView
den Werten für die entsprechenden DOM-Attribute, die direkt aufSVGSVGElement
liegen - der Wert für
transform
innerhalb voncurrentView
wirdnull
sein
Wenn die initiale Ansicht ein Link zu einem
<view>
Element war, dann:- entsprechen die Werte für
viewBox
,preserveAspectRatio
undzoomAndPan
innerhalb voncurrentView
den entsprechenden Attributen für das gegebene<view>
Element - der Wert für
transform
innerhalb voncurrentView
wirdnull
sein
Wenn die initiale Ansicht ein Link zu einem anderen Element war (d. h., außer einem
<view>
), dann:- entsprechen die Werte für
viewBox
,preserveAspectRatio
undzoomAndPan
innerhalb voncurrentView
den Werten für die entsprechenden DOM-Attribute, die direkt aufSVGSVGElement
für das nächste Vorfahrelement<svg>
liegen - die Werte für
transform
innerhalb voncurrentView
werdennull
sein
Wenn die initiale Ansicht ein Link in das SVG-Dokumentfragment mit einem SVG-Ansichtsspezifikations-Fragmentbezeichner war (d. h.
#svgView(…)
), dann:- werden die Werte für
viewBox
,preserveAspectRatio
,zoomAndPan
,transform
innerhalb voncurrentView
den Werten aus dem Fragmentbezeichner der SVG-Ansichtsspezifikation entsprechen
- entsprechen die Werte für
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-AttributecurrentScale
undcurrentTranslate
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
Nur lesbar-
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, einunsuspendRedrawAll()
-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()
undunsuspendRedraw()
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:
jsconst suspendHandleID = suspendRedraw(maxWaitMilliseconds);
und folgen Sie den Änderungen mit einem Methodenaufruf wie dem folgenden:
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()
Veraltet-
Hebt eine angegebene
suspendRedraw()
durch Bereitstellung einer eindeutigen Aussetzungs-Handle-ID auf, die von einem früherensuspendRedraw()
-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 ausstehendensuspendRedraw()
-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 dasSVGLoad
-Ereignis des Dokuments abgesendet wird), wird0
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 dasSVGLoad
-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 derpointer-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 derpointer-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 derpointer-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 derpointer-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 auf0
initialisiert. SVGSVGElement.createSVGLength()
-
Erstellt ein
SVGLength
-Objekt außerhalb von Dokumentbäumen. Das Objekt wird auf0
Benutzereinheiten initialisiert. SVGSVGElement.createSVGAngle()
-
Erstellt ein
SVGAngle
-Objekt außerhalb von Dokumentbäumen. Das Objekt wird auf einen Wert von0
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 auf0
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 alsSVGTransform::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
durchelementId
angegeben wird. Wenn ein Element gefunden wird, wird dieses Element zurückgegeben. Wenn kein solches Element existiert, wirdnull
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
auffalse
wechselt. SVGSVGElement.ononline
-
Wird ausgelöst, wenn der Browser den Zugang zum Netzwerk erlangt hat und der Wert von
Navigator.onLine
auftrue
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