Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Skripterstellung
Es gibt mehrere Möglichkeiten, SVG mit JavaScript zu erstellen und zu manipulieren. Dieses Dokument beschreibt Ereignissteuerung, Interaktivität und die Arbeit mit eingebetteten SVG-Inhalten.
Man kann das Standardverhalten des Browsers mit der Methodeevt.preventDefault() überschreiben, Ereignislistener zu Objekten mit der Syntaxelement.addEventListener(event, function, useCapture) hinzufügen und Eigenschaften von Elementen mit einer Syntax wiesvgElement.style.setProperty("fill-opacity", "0.0", "") festlegen. Beachten Sie das Vorhandensein aller drei Argumente beim Festlegen von Eigenschaften.
Verhindern des Standardverhaltens im Ereigniscode
Beim Schreiben von Drag-and-Drop-Code kann es vorkommen, dass Text auf der Seite versehentlich ausgewählt wird, während Sie ziehen. Oder wenn Sie die Rücktaste in Ihrem Code verwenden möchten, möchten Sie das Standardverhalten des Browsers überschreiben, das bei Druck auf die Rücktaste die vorherige Seite aufruft. Die Methodeevt.preventDefault() ermöglicht Ihnen dies.
Verwendung voneventListeners mit Objekten
Die MethodenaddEventListener() undremoveEventListener() sind sehr nützlich beim Schreiben von interaktiven SVGs. Sie können ein Objekt, das diehandleEvent-Schnittstelle implementiert, als zweiten Parameter an diese Methoden übergeben.
function myRect(x, y, w, h, message) { this.message = message; this.rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); this.rect.setAttributeNS(null, "x", x); this.rect.setAttributeNS(null, "y", y); this.rect.setAttributeNS(null, "width", w); this.rect.setAttributeNS(null, "height", h); document.documentElement.appendChild(this.rect); this.rect.addEventListener("click", this); this.handleEvent = (evt) => { switch (evt.type) { case "click": alert(this.message); break; } };}Inter-Dokument-Skripting
Referenzieren von eingebettetem SVG
Bei Verwendung von SVG innerhalb von HTML umfasst Adobe's SVG Viewer 3.0 automatisch eine Fenster-Eigenschaft namenssvgDocument, die auf das SVG-Dokument verweist. Dies ist nicht der Fall bei Mozillas nativer SVG-Implementierung; daher funktioniert die Verwendung vonwindow.svgDocument in Mozilla nicht. Stattdessen können Sie
const svgDoc = document.embeds["name_of_svg"].getSVGDocument();verwenden, um eine Referenz auf ein eingebettetes SVG-Dokument zu erhalten.
Der beste Weg, Zugang zu demDocument zu erhalten, das ein SVG-Dokument darstellt, besteht darin,HTMLIFrameElement.contentDocument zu betrachten (wenn das Dokument in einem<iframe> präsentiert wird) oderHTMLObjectElement.contentDocument (wenn das Dokument in einem<object>-Element präsentiert wird), wie hier:
const svgDoc = document.getElementById("iframe_element").contentDocument;Zusätzlich bieten die Elemente<iframe>,<embed> und<object> eine MethodegetSVGDocument(), die dasXMLDocument zurückgibt, das das eingebettete SVG des Elements darstellt, odernull, wenn das Element kein SVG-Dokument darstellt.
Sie können auchdocument.getElementById("svg_elem_name").getSVGDocument() verwenden, was das gleiche Ergebnis liefert.
Hinweis:Möglicherweise finden Sie Dokumentationen, die sich auf eineSVGDocument-Schnittstelle beziehen. Vor SVG 2 wurden SVG-Dokumente unter Verwendung dieser Schnittstelle dargestellt. SVG-Dokumente werden jedoch jetzt unter Verwendung derXMLDocument-Schnittstelle dargestellt.
Aufrufen von JavaScript-Funktionen
Wenn eine JavaScript-Funktion, die sich in der HTML-Datei befindet, von einer eingebetteten SVG-Datei in einem HTML-Dokument aufgerufen wird, sollten Sieparent.functionName() verwenden, um auf die Funktion zu verweisen. Obwohl das Adobe SVG Viewer Plugin die Verwendung vonfunctionName() zulässt, ist es nicht der bevorzugte Weg, Dinge zu tun.
Hinweis:LautSVG-Wiki ist die"parent" JS-Variable im Adobe SVG Version 6 Vorschau-Plugin defekt. Der vorgeschlagene Workaround besteht darin, stattdessen"top" zu verwenden. Da es sich um eine Betaversion ihres Plugins handelt, können wir dies wahrscheinlich getrost ignorieren.
Weitere Informationen und einige Beispiele finden Sie auf derSVG-Wiki-Seite zur Inter-Dokument-Skripterstellung.
setProperty hat drei Parameter
Die FunktionsvgElement.style.setProperty("fill-opacity", "0.0") wirft eine DOMException -SYNTAX ERR in Mozilla. Dieses Verhalten wird von der W3C in der DOM Level 2 Style Specification festgelegt. Die FunktionsetProperty ist als eine Funktion mit drei Parametern definiert. Das oben Genannte kann durch'svgElement.style.setProperty("fill-opacity", "0.0", "")' ersetzt werden, was den Standards entspricht.
