Javascript, SVG et DOM
Mettre un script dans un fichier SVG
|
La balise <script> dans le fichier SVG |
L'appel à un fichier javascript externe |
Fonctions, variables et méthodes gérées par Adobe Viewer
| Nom | type | paramètres | description | exemple |
| evt | variable | aucun | variable renvoyée quand le dessin SVG a le focus |
<svg width="400" height="200" onload="fonction(evt)"> Exemple1 |
|
ownerDocument getOwnerDocument() |
fonction | aucun | renvoie le document SVG |
svgdoc = evt.target.ownerDocument Exemple2 |
|
target getTarget() |
fonction | aucun | renvoie l'objet qui a le focus |
objet = evt.target Exemple1 |
| getElementById("rectangle") | fonction | identificateur de l'objet | renvoie l'objet qui a pour "id" la valeur envoyée |
objet= svgdoc.getElementById("rectangle") Exemple2 |
| getAttribute("id") | fonction | nom d'un attribut de l'objet SVG | renvoie la valeur de l'attribut | largeur=objet.getAttribute("width") Exemple2 |
| setAttribute("id",valeur) | méthode | nom d'un attribut et la valeur envoyée | affecte à un attribut la valeur envoyée | objet.setAttribute("width",300) Exemple2 ( pour xlink:href utilisez setAttributeNS ) |
| setAttributeNS("...","xlink:href",lien) | méthode | adresse NS, attribut et valeur | affecte à un attribut la valeur envoyée | objet.setAttributeNS("...","xlink:href",truc.htm) Exemple18 |
| style getStyle() |
fonction | aucun | renvoie le style d'un objet | aspect=objet.style Exemple2 |
| setProperty("fill",valeur) | méthode | le nom de la propriété et la valeur envoyée | affecte la valeur à une propriété | objet.getStyle().setProperty("fill","red") Exemple2 |
| getPropertyValue("fill") | fonction | le nom de la propriété | renvoie la valeur de la propriété | couleur=objet.getStyle().getPropertyValue("fill") Exemple10 |
| attributes | fonction | aucun | renvoie les attributs de l'objet comme NamedNodeMap | att=objet.attributes att.length donne le nombre d'attributs att.item(i) donne le ième attribut att.item(i).name son nom att.item(i).value sa valeur Exemple17 |
| createElement("rect") | fonction | le type de l'objet créé | crée un objet | nouveau=svgdoc.createElement("rect") Exemple1 Exemple8 |
| appendChild(nouveau) | méthode | nom de l'objet créé | insère l'objet créé comme descendant d'un noeud | node.appendChild(nouveau) Exemple1 Exemple8 |
| replaceChild(nouveau,ancien) | méthode | objets | remplace ancien par nouveau | node.replaceChild(nouveau,ancien) Exemple15 |
| insertBefore(nouveau,place) | méthode | objets | insère nouveau avant l'objet place | node.insertBefore(nouveau,place) Exemple16 |
| createTextNode("tra la") | fonction | texte à afficher | crée un noeud qui contient le texte à afficher comme descendant d'un noeud de type "text" | texte=svgdoc.createTextNode("tra la"); Exemple4 |
| setData("tra la") | méthode | texte à afficher | Envoie le texte à un noeud descendant d'un noeud "text" | objet.setData("Tra la la") Exemple5 |
|
firstChild getFirstChild() |
fonction | aucun | renvoie le premier descendant d'un noeud | texte=objet.firstChild Exemple5 |
| addEventListener ("mousemove",fonction,false) | méthode | événement , fonction appelée, false | crée un événement pour un objet | objet.addEventListener ("mousemove",alerte,false) Exemple1 Exemple8 |
| removeChild(ancien) | méthode | nom d'un objet | détruit l'objet comme descendant du noeud | node.removeChild(ancien) Exemple8 |
| cloneNode(true) | fonction | false ou true | crée un clone de objet et de ses descendants avec true | nouveau=objet.cloneNode(true) Exemple3 |
| getCharCode() | fonction | aucun | renvoie le code de la touche pressée | key=evt.getCharCode() Exemple5 |
| String.fromCharCode(key) | fonction | Code de la touche | renvoie la valeur chaîne de la touche | lettre = String.fromCharCode(key) Exemple5 |
|
clientX getClientX() |
fonction | aucun | renvoie l'abscisse du pointeur dans le repère SVG | x_mouse=evt.clientX Exemple6 Exemple19 |
|
clientY getClientY() |
fonction | aucun | renvoie l'ordonnée du pointeur dans le repère SVG | y_mouse=evt.clientY Exemple6 Exemple19 |
|
screenX getScreenX() |
fonction | aucun | renvoie l'abscisse du pointeur dans le repère HTML | x_mouse=evt.screenX Exemple6 |
|
screenY getScreenY() |
fonction | aucun | renvoie l'ordonnée du pointeur dans le repère HTML | y_mouse=evt.screenY Exemple6 |
|
childNodes getChilNodes() |
fonction | aucun | renvoie les descendants du noeud dans une liste y compris les CR !.... | groupe=node.childNodes Exemple7 |
| getElementsByTagName(tag) | fonction | Le type recherché "*" est le joker |
renvoie les descendants du type indiqué dans une liste | groupe=node.getElementsByTagName('rect') Exemple9 |
|
length getLenght() |
fonction | aucun | donne la longueur d'un objet NodeList | nombre=groupe.lenght Exemple7 Exemple9 |
| item(n) | fonction | nombre entier >=0 | renvoie le nième objet de la liste | objet=groupe.item(1) Exemple7 Exemple9 |
| nodeType | fonction | aucun | renvoie le type du noeud sous forme d'un entier | i=objet.nodeType Exemple10 |
| nodeName | fonction | aucun | renvoie le nom du tag | nom=objet.nodeName Exemple10 |
| getCharNumAtPosition(d) | fonction | SVGPoint | renvoie l'indice du caractère à la position indiquée | indice=objet.getCharNumAtPosition(d) Exemple11 |
| getExtentOfChar(i) | fonction | Entier positif ou nul | renvoie le rectangle entourant la lettre comme SVGRect | trace=objet.getExtentOfChar(5); trace.x, trace.y, trace.width et trace.height Exemple11 |
|
getStartPositionOfChar(i) getEndPositionOfChar(i) |
fonction | Entier positif ou nul | renvoie le point de départ du tracé de la lettre comme SVGPoint | p=objet.getStartPositionOfChar(1); p.x et p.y donnent les coordonnées Exemple11 |
| getNumberOfChars() | fonction | aucun | renvoie le nombre de lettres, y compris les espaces | longueur=objet.getNumberOfChars() Exemple12 |
| getComputedTextLength() | fonction | aucun | renvoie la longueur en points pour tracer la chaîne | occupe=objet.getComputedTextLength() Exemple12 |
| selectSubString(i,j) | méthode | indice de départ et longueur de la sous-chaîne | sélectionne la sous-chaîne | objet.selectSubString(0,2) Exemple12 |
| getBBox() | fonction | aucun | renvoie le rectangle entourant l'objet comme SVGRect | trace=objet.getBBox(); trace.x, trace.y, trace.width et trace.height Exemple13 |
| getCTM() | fonction | aucun | retourne la matrice de la transformation | matrice=objet.getCTM(); matrice.a,matrice.b ..... matrice.f sont définis Exemple14 |
| inverse | fonction | aucun | retourne la matrice inverse | inverse_matrice=matrice.inverse Exemple14 |
| multiply(matrice2) | fonction | matrice | multiplie par matrice2 | produit=matrice1.multiply(matrice2) Exemple14 |
| currentScale | nombre | aucun | renvoie ou force le facteur de Zoom | currentScale=2 Exemple19 |
| currentTranslate | SVGPoint | aucun | renvoie ou force le facteur de Pan | currentTranslate.x=100 Exemple19 |