Javascript, SVG and DOM
Put a script in SVG file
|
Tag <script> in SVG file |
External javascript file |
Functions, variables and methods in Adobe Viewer
| Name | type | parameters | description | example |
| evt | variable | no | variable when SVG has focus |
<svg width="400" height="200" onload="fonction(evt)"> Example1 |
|
ownerDocument getOwnerDocument() |
function | no | return SVG document |
svgdoc = evt.target.ownerDocument Example2 |
|
target getTarget() |
function | no | return object with focus |
objet = evt.target Example1 |
| getElementById("rectangle") | function | id of object | return object with id as parameter |
objet= svgdoc.getElementById("rectangle") Example2 |
| getAttribute("id") | function | attribut name | return value of attribut | largeur=objet.getAttribute("width") Example2 |
| setAttribute("id",valeur) | method | attribut name and value | assign value to attribut | objet.setAttribute("width",300) Example2 for xlink:href, use setAttributeNS |
| setAttributeNS("...","xlink:href",lien) | method | NS href, attribut and value | assign value to attribut | objet.setAttributeNS("...","xlink:href",truc.htm) Example18 |
| style getStyle() |
function | no | return style | aspect=objet.style Example2 |
| setProperty("fill",valeur) | method | property name and value | assign value to property | objet.getStyle().setProperty("fill","red") Example2 |
| getPropertyValue("fill") | function | property name | return value of property | couleur=objet.getStyle().getPropertyValue("fill") Example10 |
| attributes | function | no | return attributs of object as NamedNodeMap | att=objet.attributes att.length give number of attributs att.item(i) give attribut n°i att.item(i).name give his name att.item(i).value give his value Example17 |
| createElement("rect") | function | type of object | create object | nouveau=svgdoc.createElement("rect") Example1 Example8 |
| appendChild(nouveau) | method | object name | insert object as child of node | node.appendChild(nouveau) Example1 Example8 |
| replaceChild(new,old) | method | objects | replace old by new | node.replaceChild(new,old) Example15 |
| insertBefore(new,position) | method | objects | insert new befor object position | node.insertBefore(new,position) Example16 |
| createTextNode("tra la") | function | text to write | create node with data for text object | texte=svgdoc.createTextNode("tra la"); Example4 |
| setData("tra la") | method | text to write | assign text data to child of text node | objet.setData("Tra la la") Example5 |
|
firstChild getFirstChild() |
function | no | return first child of node | texte=objet.firstChild Example5 |
| addEventListener ("mousemove",function,false) | method | event, function false | create event for object | objet.addEventListener ("mousemove",alerte,false) Example1 Example8 |
| removeChild(ancien) | method | object name | delete object child of node | node.removeChild(ancien) Example8 |
| cloneNode(true) | function | false or true | clone object and all childs if true | nouveau=objet.cloneNode(true) Example3 |
| getCharCode() | function | no | return key pressed code | key=evt.getCharCode() Example5 |
| String.fromCharCode(key) | function | Code | return string value of key | lettre = String.fromCharCode(key) Example5 |
|
clientX getClientX() |
function | no | return x of pointer in SVG | x_mouse=evt.clientX Example6 Example19 |
|
clientY getClientY() |
function | no | return y of pointer in SVG | y_mouse=evt.clientY Example6 Example19 |
|
screenX getScreenX() |
function | no | return x of pointer in HTML | x_mouse=evt.screenX Example6 |
|
screenY getScreenY() |
function | no | return y of pointer in HTML | y_mouse=evt.screenY Example6 |
|
childNodes getChilNodes() |
function | no | return childs of node in a list with CR as childs !.... | groupe=node.childNodes Example7 |
| getElementsByTagName(tag) | function | object type "*" as joker |
return childs of this type in a list | groupe=node.getElementsByTagName('rect') Example9 |
|
length getLenght() |
function | no | return length of object NodeList | nombre=groupe.lenght Example7 Example9 |
| item(n) | function | integer >=0 | return nième object of list | objet=groupe.item(1) Example7 Example9 |
| nodeType | function | no | return type of node as integer | i=objet.nodeType Example10 |
| nodeName | function | no | return name of tag | nom=objet.nodeName Example10 |
| getCharNumAtPosition(d) | function | SVGPoint | return code of character at position | indice=objet.getCharNumAtPosition(d) Example11 |
| getExtentOfChar(i) | function | integer >=0 | return rectangle around letter as SVGRect object | trace=objet.getExtentOfChar(5); trace.x, trace.y, trace.width and trace.height Example11 |
|
getStartPositionOfChar(i) getEndPositionOfChar(i) |
function | integer>=0 | return left bottom vertice of letter as SVGPoint | p=objet.getStartPositionOfChar(1); p.x and p.y are coordinates Example11 |
| getNumberOfChars() | function | no | return number of letters with spaces | longueur=objet.getNumberOfChars() Example12 |
| getComputedTextLength() | function | no | return length in points to draw string | occupe=objet.getComputedTextLength() Example12 |
| selectSubString(i,j) | method | index to start and length of string | select sub-string | objet.selectSubString(0,2) Example12 |
| getBBox() | function | no | return rectangle around object as SVGRect object | trace=objet.getBBox; trace.x, trace.y, trace.width and trace.height Example13 |
| getCTM() | function | no | return matrix of transformation | matrice=objet.getCTM(); matrice.a,matrice.b ..... matrice.f are defined Example14 |
| inverse | function | no | return inverse of matrix | inverse_matrice=matrice.inverse Example14 |
| multiply(matrix2) | function | matrix | multiply by matrix2 | result=matrix1.multiply(matrix2) Example14 |
| currentScale | number | no | return or affect Zoom factor | currentScale=2 Example19 |
| currentTranslate | SVGPoint | no | return or affect Pan factor | currentTranslate.x=100 Example19 |