Scripting
There are several ways to create and manipulate SVG using JavaScript.This document describes event handling, interactivity and working with embedded SVG content.
One can override default browser behaviors with theevt.preventDefault() method, add event listeners to objects with the syntaxelement.addEventListener(event, function, useCapture), and set element properties with syntax likesvgElement.style.setProperty("fill-opacity", "0.0", ""). Note the existence of all three arguments setting properties.
Preventing default behavior in event code
When writing drag and drop code, sometimes you'll find that text on the page gets accidentally selected while dragging. Or if you want to use the backspace key in your code, you want to override the browser's default behavior when the backspace key is pressed, which is to go back to the previous page. Theevt.preventDefault() method lets you do this.
UsingeventListeners with objects
The methodsaddEventListener() andremoveEventListener() are very useful when writing interactive SVG. You can pass an object that implements thehandleEvent interface as the second parameter to these methods.
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-document scripting
Referencing embedded SVG
When using SVG within HTML, Adobe's SVG Viewer 3.0 automatically includes a window property calledsvgDocument that points to the SVG document. This is not the case for Mozilla's native SVG implementation; therefore, usingwindow.svgDocument does not work in Mozilla. Instead, you can use
const svgDoc = document.embeds["name_of_svg"].getSVGDocument();to get a reference to an embedded SVG document instead.
The best way to get access to theDocument representing an SVG document is to look atHTMLIFrameElement.contentDocument (if the document is presented in an<iframe>) orHTMLObjectElement.contentDocument (if the document is presented in an<object> element), like this:
const svgDoc = document.getElementById("iframe_element").contentDocument;In addition, the<iframe>,<embed>, and<object> elements offer a method,getSVGDocument(), which returns theXMLDocument representing the element's embedded SVG ornull if the element doesn't represent an SVG document.
You can also usedocument.getElementById("svg_elem_name").getSVGDocument(), which gives the same result.
Note:You may find documentation referring to anSVGDocument interface. Prior to SVG 2, SVG documents were represented using that interface. However, SVG documents are now represented using theXMLDocument interface instead.
Calling JavaScript functions
When calling a JavaScript function that resides in the HTML file from an SVG file that is embedded in an HTML document, you should useparent.functionName() to reference the function. Although the Adobe SVG viewer plugin allows the use offunctionName(), it's not the preferred way to do things.
Note:According to theSVG wiki the"parent" JS variable is broken in Adobe's SVG version 6 preview plugin. The suggested workaround is to use"top" instead of"parent". Since it is a beta version of their plugin, we can probably safely ignore this.
More information and some examples can be found on theSVG wiki inter-document scripting page.
setProperty has three parameters
The functionsvgElement.style.setProperty("fill-opacity", "0.0") throws a DOMException -SYNTAX ERR in Mozilla. This behavior is specified by the W3C in the DOM Level 2 Style Specification. The functionsetProperty is defined as a function with three parameters. The above can be replaced with'svgElement.style.setProperty("fill-opacity", "0.0", "")', which is standards compliant.
