SVG:Script: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(wiki.m.o is for planning, MDC is for current state, so moving to MDC)
 
Line 1: Line 1:
== preventing default behaviour in event code ==
#REDIRECT [http://developer.mozilla.org/en/docs/SVG:Scripting Scripting]
 
When writing drag and drop code, you will realize 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 prevent the browser from going back to the last page.
in these cases, one can use the evt.preventDefault() method.
 
== using eventListeners with objects ==
 
The methods addEventListener()and removeEventListener() are very usefull when writing interactive SVG. you can pass an object as the second parameter to that methods. this object has to implement the handleEvent interface.
 
function myRect(x,y,w,h,message){
  this.message=message
 
  this.rect=document.createElementNS("http://www.w3.org/2000/svg","rect")
  this.rect.setAttribute("x",x)
  this.rect.setAttribute("y",y)
  this.rect.setAttribute("width",w)
  this.rect.setAttribute("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 SVGs ==
 
When using SVG inside 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, and therefore using window.svgDocument does not work in Mozilla. A suggestion is to use <pre>var svgDoc=document.embeds["name_of_svg"].getSVGDocument();</pre> to get a reference to an embedded SVG document instead.
 
Alternatively, simply using document.getElementId("''svg_elem_name''") will give the same result, though I've only tested this in FireFox 1.5 RC3.
 
== 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, one should use 'parent.functionname();' to reference such a function. The Adobe SVG viewer plugin allows the use of functionname(), but 'parent.functionname()' also works, so in this case using 'parent.functionname()' is preferred.
 
Note: according to the [http://svg-whiz.com/wiki/index.php?title=Inter-Document_Communication SVG-Whiz 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 [http://svg-whiz.com/wiki/index.php?title=Inter-Document_Communication SVG-Whiz 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.
 
== Links ==
 
[[SVG:Home Page]]
 
[http://svg-whiz.com/wiki/index.php?title=Main_Page#Scripting_and_Programming SVG-Whiz wiki on Scripting and Programming]

Latest revision as of 05:02, 3 December 2005

  1. REDIRECT Scripting
Retrieved from "https://wiki.mozilla.org/index.php?title=SVG:Script&oldid=21050"