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.
Instanz-Eigenschaften
Dieses Interface erbt auch Eigenschaften von seinem Elternteil, SVGGraphicsElement
.
SVGSVGElement.x
Schreibgeschützt-
Ein
SVGAnimatedLength
, das demx
Attribut des angegebenen<svg>
-Elements entspricht. SVGSVGElement.y
Schreibgeschützt-
Ein
SVGAnimatedLength
, das demy
Attribut des angegebenen<svg>
-Elements entspricht. SVGSVGElement.width
Schreibgeschützt-
Ein
SVGAnimatedLength
, das demwidth
Attribut des angegebenen<svg>
-Elements entspricht. SVGSVGElement.height
Schreibgeschützt-
Ein
SVGAnimatedLength
, das demheight
Attribut des angegebenen<svg>
-Elements entspricht. SVGSVGElement.viewBox
Schreibgeschützt-
Ein
SVGAnimatedRect
, das demviewBox
Attribut des angegebenen<svg>
-Elements entspricht. SVGSVGElement.preserveAspectRatio
Schreibgeschützt-
Ein
SVGAnimatedPreserveAspectRatio
, das dempreserveAspectRatio
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 wieviewBox
, 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 Attributfalse
. Wenn die initiale Ansicht eine "benutzerdefinierte" Ansicht ist, dann ist dieses Attributtrue
. 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:- werden die Werte für
viewBox
,preserveAspectRatio
undzoomAndPan
innerhalb voncurrentView
den Werten der entsprechenden DOM-Attribute entsprechen, die direkt aufSVGSVGElement
vorhanden sind - wird der Wert für
transform
innerhalb voncurrentView
null
sein
Wenn die initiale Ansicht ein Link zu einem
<view>
-Element war, dann:- werden die Werte für
viewBox
,preserveAspectRatio
undzoomAndPan
innerhalb voncurrentView
den entsprechenden Attributen für das gegebene<view>
-Element entsprechen - wird der Wert für
transform
innerhalb voncurrentView
null
sein
Wenn die initiale Ansicht ein Link zu einem anderen Element (d.h. außer einem
<view>
) war, dann:- werden die Werte für
viewBox
,preserveAspectRatio
undzoomAndPan
innerhalb voncurrentView
den Werten der entsprechenden DOM-Attribute entsprechen, die direkt aufSVGSVGElement
für das nächstgelegene übergeordnete<svg>
-Element vorhanden sind - wird der Wert für
transform
innerhalb voncurrentView
null
sein
Wenn die initiale Ansicht ein Link in das SVG-Dokumentfragment mit einem SVG-View-Spezifikations-Fragment-Identifikator (d.h.
#svgView(…)
) war, dann:- werden die Werte für
viewBox
,preserveAspectRatio
,zoomAndPan
,transform
innerhalb voncurrentView
den Werten aus dem SVG-View-Spezifikations-Fragment-Identifikator entsprechen
- werden 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 Benutzerskalierung und Verschiebungsoperationen zu berücksichtigen. DOM-AttributecurrentScale
undcurrentTranslate
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, einunsuspendRedrawAll()
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()
undunsuspendRedraw()
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:
jsconst suspendHandleID = suspendRedraw(maxWaitMilliseconds);
und die Änderungen mit einem Methodenaufruf wie folgt abschließen:
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 ein angegebenes
suspendRedraw()
auf, indem es eine eindeutige Suspend-Handle-ID bereitstellt, die von einem vorherigensuspendRedraw()
-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 anstehendensuspendRedraw()
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 dasSVGLoad
-Ereignis des Dokuments ausgelöst 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 Dokument-Zeitachse begonnen hat (zum Beispiel durch ein Skript, das in einem<script>
-Element ausgeführt wird, bevor dasSVGLoad
-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 vonpointer-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 vonpointer-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 vonpointer-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 vonpointer-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 auf0
initialisiert. SVGSVGElement.createSVGLength()
-
Erstellt ein
SVGLength
-Objekt außerhalb jeglicher Dokumentbäume. Das Objekt wird auf0
Benutzereinheiten initialisiert. SVGSVGElement.createSVGAngle()
-
Erstellt ein
SVGAngle
-Objekt außerhalb jeglicher Dokumentbäume. Das Objekt wird auf einen Wert von0
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 auf0
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 alsSVGTransform::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
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
-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
auffalse
umschaltet. SVGSVGElement.ononline
-
Wird ausgelöst, wenn der Browser Zugang zum Netzwerk erhält und der Wert von
Navigator.onLine
auftrue
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
SVGSVGElement | ||||||||||||
animationsPaused | ||||||||||||
checkEnclosure | ||||||||||||
checkIntersection | ||||||||||||
createSVGAngle | ||||||||||||
createSVGLength | ||||||||||||
createSVGMatrix | ||||||||||||
createSVGNumber | ||||||||||||
createSVGPoint | ||||||||||||
createSVGRect | ||||||||||||
createSVGTransform | ||||||||||||
createSVGTransformFromMatrix | ||||||||||||
currentScale | ||||||||||||
currentTranslate | ||||||||||||
currentView | ||||||||||||
deselectAll | ||||||||||||
forceRedraw | ||||||||||||
getCurrentTime | ||||||||||||
getElementById | ||||||||||||
getEnclosureList | ||||||||||||
getIntersectionList | ||||||||||||
height | ||||||||||||
pauseAnimations | ||||||||||||
preserveAspectRatio | ||||||||||||
setCurrentTime | ||||||||||||
suspendRedraw | ||||||||||||
unpauseAnimations | ||||||||||||
unsuspendRedraw | ||||||||||||
unsuspendRedrawAll | ||||||||||||
useCurrentView | ||||||||||||
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.