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.
Instanzeigenschaften
Diese Schnittstelle erbt außerdem Eigenschaften von ihrer übergeordneten Schnittstelle SVGGraphicsElement.
SVGSVGElement.xSchreibgeschützt-
Ein
SVGAnimatedLength, das dem Attributxdes jeweiligen<svg>-Elements entspricht. SVGSVGElement.ySchreibgeschützt-
Ein
SVGAnimatedLength, das dem Attributydes jeweiligen<svg>-Elements entspricht. SVGSVGElement.widthSchreibgeschützt-
Ein
SVGAnimatedLength, das dem Attributwidthdes jeweiligen<svg>-Elements entspricht. SVGSVGElement.heightSchreibgeschützt-
Ein
SVGAnimatedLength, das dem Attributheightdes jeweiligen<svg>-Elements entspricht. SVGSVGElement.viewBoxSchreibgeschützt-
Ein
SVGAnimatedRect, das dem AttributviewBoxdes jeweiligen<svg>-Elements entspricht. SVGSVGElement.preserveAspectRatioSchreibgeschützt-
Ein
SVGAnimatedPreserveAspectRatio, das dem AttributpreserveAspectRatiodes jeweiligen<svg>-Elements entspricht. SVGSVGElement.pixelUnitToMillimeterXSchreibgeschü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.pixelUnitToMillimeterYSchreibgeschützt-
Eine Gleitkommazahl, die die Größe einer Pixeleinheit entlang der y-Achse des Viewports angibt.
SVGSVGElement.screenPixelToMillimeterXSchreibgeschü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.screenPixelToMillimeterYSchreibgeschützt-
Die entsprechende Größe eines Bildschirmpixels entlang der y-Achse des Viewports.
SVGSVGElement.useCurrentViewSchreibgeschü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 wieviewBoxbasiert, 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 Attributfalse, bei einer benutzerdefinierten Ansichttrue. SVGSVGElement.currentViewSchreibgeschü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,preserveAspectRatioundzoomAndPanincurrentViewstimmen mit den Werten der entsprechenden DOM-Attribute direkt aufSVGSVGElementüberein. - Der Wert von
transformincurrentViewistnull.
War die Ausgangsansicht ein Link auf ein
<view>-Element, gilt:- Die Werte von
viewBox,preserveAspectRatioundzoomAndPanincurrentViewentsprechen den jeweiligen Attributen des betreffenden<view>-Elements. - Der Wert von
transformincurrentViewistnull.
War die Ausgangsansicht ein Link auf ein anderes Element als ein
<view>-Element, gilt:- Die Werte von
viewBox,preserveAspectRatioundzoomAndPanincurrentViewstimmen mit den Werten der entsprechenden DOM-Attribute direkt aufSVGSVGElementfür das nächstgelegene übergeordnete<svg>-Element überein. - Der Wert von
transformincurrentViewistnull.
War die Ausgangsansicht ein Link auf das SVG-Dokumentfragment mit einem Fragmentbezeichner gemäß der SVG-Ansichtsspezifikation (also
#svgView(…)), gilt:- Die Werte von
viewBox,preserveAspectRatio,zoomAndPanundtransformincurrentViewentsprechen den Werten aus diesem Fragmentbezeichner.
- Die Werte von
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-AttributecurrentScaleundcurrentTranslateentsprechen der 2×3-Matrix[a b c d e f] = [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]. Wenn die Vergrößerung aktiviert ist (alsozoomAndPan="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.currentTranslateSchreibgeschü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 vonunsuspendRedrawAll()erfolgt ist oder der Timeout abgelaufen ist.In Umgebungen ohne Interaktivität (beispielsweise Printmedien) soll das Neuzeichnen nicht ausgesetzt werden. Aufrufe von
suspendRedraw()undunsuspendRedraw()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:
jsconst suspendHandleID = suspendRedraw(maxWaitMilliseconds);Fügen Sie nach den Änderungen einen Methodenaufruf wie den folgenden hinzu:
jsunsuspendRedraw(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 vonsuspendRedraw()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 vonsuspendRedraw()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
truezurü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 dasSVGLoad-Ereignis des Dokuments ausgelöst wird), wird0zurü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 dasSVGLoad-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
NodeListmit Grafikelementen zurück, deren dargestellter Inhalt das angegebene Rechteck schneidet. Ein infrage kommendes Grafikelement gilt nur dann als Treffer, wenn es gemäß der Verarbeitung vonpointer-eventsZiel von Pointer-Ereignissen sein kann. SVGSVGElement.getEnclosureList()-
Gibt eine
NodeListmit 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 vonpointer-eventsZiel von Pointer-Ereignissen sein kann. SVGSVGElement.checkIntersection()-
Gibt
truezurü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 vonpointer-eventsZiel von Pointer-Ereignissen sein kann. SVGSVGElement.checkEnclosure()-
Gibt
truezurü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 vonpointer-eventsZiel 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 mit0initialisiert. SVGSVGElement.createSVGLength()-
Erstellt ein
SVGLength-Objekt außerhalb aller Dokumentbäume. Das Objekt wird mit0Benutzereinheiten initialisiert. SVGSVGElement.createSVGAngle()-
Erstellt ein
SVGAngle-Objekt außerhalb aller Dokumentbäume. Das Objekt wird mit einem Wert von0Grad (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 mit0Benutzereinheiten 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 alsSVGTransform::matrixübernommen. SVGSVGElement.getElementById()-
Durchsucht dieses SVG-Dokumentfragment – also nur einen Teil des Dokumentbaums – nach einem Element, dessen
iddem Wert vonelementIdentspricht. Wird ein Element gefunden, wird es zurückgegeben. Andernfalls wirdnullzurü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.onLinezufalsewechselt. SVGSVGElement.ononline-
Wird ausgelöst, wenn der Browser Netzwerkzugriff erhält und der Wert von
Navigator.onLinezutruewechselt. 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-
Promiseabgelehnt 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
Promiseabgelehnt 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> |