One can override default browser behaviors with the evt.preventDefault( ) method, add eventListeners to objects with the syntax element.addEventListener(event, function, useCapture), and set element properties with syntax svgElement.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 accidently 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. The evt.preventDefault() method lets you do this.
Using eventListeners with objects
The methods addEventListener() and removeEventListener() are very useful when writing interactive SVG. You can pass an object that implements the handleEvent interface as the second parameter to these methods.
function myRect(x,y,w,h,message){
this.message=message
this.rect=document.createElementNS("https://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,false)
this.handleEvent= function(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 called svgDocument that points to the SVG document. This is not the case for Mozilla's native SVG implementation; therefore, using window.svgDocument does not work in Mozilla. Instead, you can use
var svgDoc=document.embeds["name_of_svg"].getSVGDocument();
to get a reference to an embedded SVG document instead.
You can also use document.getElementById("svg_elem_name").getSVGDocument(), which gives the same result.
Jonathan Watt has a demo page showing how to use getSVGDocument together with the contentDocument property to access embedded SVG in a way that will work in all browsers.
One of the takeaways from Jonathan's page is that, for the special case of SVG embedded as the data property of an <object> tag (as opposed to an <svg> or <embed> tag) you must use the contentDocument property:
var svgDoc = document.getElementById("my_object_element").contentDocument;
Inter-document scripting: 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 use parent.functionname() to reference the function. Although the Adobe SVG viewer plugin allows the use of functionname(), it's not the preferred way to do things.
Note: according to the SVG 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 the SVG wiki inter-document scripting page.
setProperty has three parameters
The function svgElement.style.setProperty("fill-opacity", "0.0") throws a DOMException - SYNTAX ERR in Mozilla. This behaviour is specified by the W3C in the DOM Level 2 Style Specification. The function setProperty 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.
