SVG et Javascript

Ce fichier au format Word zippé    PDF

Appels JS depuis  HTML    La souris    Créer des objets    Changer un texte    SVG inclus dans HTML

Accès aux objets:

Un exemple d'objet: une ligne polygonale fermée
<g id="France" style="stroke:#131516;stroke-width:3;stroke-linejoin:round;fill:#DEECB3">
<path d="M-1006 3752 l 25 -36 8 -31 13 -12 0 -102 -17 -17 -17 21 0 16 -58 19 -10 77 20 36 27 29 9 0 z"/>
</g>

Appels javascript depuis le fichier HTML

Récupérer la couleur du remplissage
a=document.carte.getSVGDocument().getElementById('France').getAttribute('style');
b=a.indexOf('fill:');couleur=a.substring(b+5,b+12);
( b vaut dans notre exemple "stroke:#131516;stroke-width:3;stroke-linejoin:round;fill:#DEECB3 ")

Attribuer une couleur de remplissage à l'objet
document.carte.getSVGDocument().getElementById('France').getStyle().setProperty('fill', '#FF0000')

Montrer/cacher cet objet
document.carte.getSVGDocument().getElementById('France').getStyle().setProperty("display","none")}
document.carte.getSVGDocument().getElementById('France').getStyle().setProperty("display","inline")

Haut de page

Modifier un objet

Depuis la page HTML
Tous les attributs d'un objet sont modifiables
Ici le plugin est nommé "figure", l'objet est un rectangle, nous modifions sa largeur

document.figure.getSVGDocument().getElementById('ID_objet').setAttribute('width',200);

En utilisant une fonction définie dans le fichier svg
Nous voulons dessiner un triangle dont les coordonnées des sommets sont envoyées
Depuis le fichier HTML, appel en javascript:

window.triangle(xa,ya,xb,yb,xc,yc);

Dans le fichier svg:
Au chargement, appel de la fonction OnLoadEvent(evt) pour définir l'objet window.triangle

<svg id="root" xml:space="preserve" width="400" height="400" onload="OnLoadEvent(evt)">
……..
Le tracé est défini, réduit à M0 0 au départ, il a l'ID "trace1"
<path id="trace1" style="stroke-width:1; stroke:blue; fill:none" d="M0 0"/>
……
<script><![CDATA[
Fonction triangle qui construit la chaîne d
function triangle(a,b,c,d,e,f)
{ var str="M";

str+=a+" "+b+" "+c+" "+d+" "+e+" "+f+" z";
trace1.setAttribute("d", str);}

Déclaration de l'objet window.triangle
function OnLoadEvent(evt)
{ var doc = evt.getTarget() != null ? evt.getTarget().getOwnerDocument() : null;
if (doc != null)
{ trace1 = doc.getElementById("trace1");
window.triangle = triangle;}}
]]></script>
</svg>

Nous aurions le même effet en plus simple avec dans le fichier HTML, l'appel:
tri="M "+xa+" "+ya+" "+xb+" "+yb+" "+xc+" "+yc+" z";
document.figure.getSVGDocument().getElementById("trace1").setAttribute("d",tri);

Haut de page

Travailler à la souris sur le dessin

Nous pouvons récupérer les actions de la souris sur le dessin
Un exemple simple:
Quand la souris est sur le dessin, les coordonnées du pointeur sont récupérées et affichées dans un formulaire nommé "coords" de la page HTML, quand la souris sort du rectangle, l'affichage est vide ….
<?xml version="1.0" encoding="iso-8859-1"?>
<svg id="root" xml:space="preserve" width="400" height="400">
<script><![CDATA[
var xm;var ym;
function coordonnees(evt)
{xm=evt.getClientX();ym=evt.getClientY();
document.coords.x.value=xm;document.coords.y.value=ym;}

function sorti(evt)
{document.ou.T1.value="";document.ou.T2.value="";}
]]></script>
<g onmousemove="coordonnees(evt)" onmouseover="coordonnees(evt)" onmouseout="sorti(evt)">
<rect id="bkgrnd" x="0" y="0" width="400" height="400" style="fill:#E0E0E0"/>
</g>
</svg>

Autre exemple: déplacer une figure en cliquant à la souris et en déplaçant la souris:

<?xml version="1.0" encoding="iso-8859-1"?>
<svg id="root" xml:space="preserve" width="400" height="400" onload="OnLoadEvent(evt)">
<script><![CDATA[
var appui=false;var xm;var ym;
function accrocher(evt)
{if (evt.getTarget().getAttribute("id")=="bkgrnd")
{xm=evt.getClientX();ym=evt.getClientY();appui=true;
rectangle.setAttribute("x",xm);
rectangle.setAttribute("y",ym);}}
function bouger(evt)
{if (appui==true)
{xm=evt.getClientX();ym=evt.getClientY();
rectangle.setAttribute("x",xm);rectangle.setAttribute("y",ym);}}
function lacher(evt)
{if (evt.getTarget().getAttribute("id")=="rectangle")
{appui=false;}}
function OnLoadEvent(evt)
{ var doc = evt.getTarget() != null ? evt.getTarget().getOwnerDocument() : null;
if (doc != null)
{ rectangle=doc.getElementById("rectangle");}}
]]></script>
<g onmousemove="bouger(evt)" onmousedown="accrocher(evt)" onmouseup="lacher(evt)">
<rect id="bkgrnd" x="0" y="0" width="400" height="400" style="fill:#E0E0E0"/>
<rect id="rectangle" x="0" y="0" width="100" height="50" style="fill:#CC0000"/>
</g>
</svg>

Quand on clique, le rectangle est collé à la souris et suit ses mouvements tant que le bouton est pressé.

Haut de page

Créer des objets SVG à la demande

Vous pouvez dupliquer un objet graphique ou texte, lui assigner un ID, modifier ses paramètres, le placer dans un sous-groupe.
Voici un exemple :

function clone_point(evt)
{var svgdoc=evt.getTarget().getOwnerDocument();
var target=svgdoc.getElementById("PL0");
var newnode = target.cloneNode(false);
newnode.setAttribute ('cx', 200) ;
newnode.setAttribute ('cy', 150) ;
newnode.setAttribute ('id', "PL1") ;
var contents = svgdoc.getElementById ('points');

newnode = contents.appendChild (newnode)}

L’objet à cloner, un point rouge
<g id="points">
<circle id="PL0" cx="0" cy="0" r="2" style="stroke:red; fill:red"/>
</g>
Vous obtenez avec cet exemple un rond rouge centré en 200 ;150.

Dans la structure SVG, l’objet est placé après PL0, le résultat est le même que si vous aviez tapé
<g id="points">
<circle id="PL0" cx="0" cy="0" r="2" style="stroke:red; fill:red"/>
<circle id="PL1" cx="200" cy="150" r="2" style="stroke:red; fill:red"/>
</g>

Haut de page

Changer le contenu d’un texte affiché

Vous pouvez accéder au contenu du texte affiché, le texte est dans le DOM un enfant de la balise texte
Si vous avez la balise texte suivante

<text id="message" x="100" y="50" style="font-size:12"> ? </text>

avec la procédure suivante
var svgdoc=evt.getTarget().getOwnerDocument();
var node =svgdoc.getElementById("message");

child=node.getFirstChild();
child.setData("Voici un nouveau contenu texte")

Le texte "Voici un nouveau contenu texte" sera affiché à la place du point d’interrogation
Vous pouvez évidemment avec javascript, afficher un texte qui sera dépendant des actions de l’utilisateur.

Pour avoir les lettres accentuées affichées correctement, mettre en tête du fichier SVG
<?xml version="1.0" encoding="iso-8859-1"?>

Haut de page

Figure SVG directement dans le fichier HTML

Ne fonctionne qu'avec Internet Explorer 5.5, nécessite les fichiers svg.htc et dummy.svg
Exemple:
<HTML XMLNS:svg>
<?IMPORT namespace="svg" implementation="svg.htc">
<HTML>
<BODY>
<p>Essai de SVG</p>
<svg:svg width="400" height="200">
<svg:g>
<svg:rect x="20" y="20" width="200" height="150" style="fill:red;stroke:yellow"/>
<svg:text x="100" y="50" style="text-anchor:middle;font-size:25">Ouille</svg:text>
</svg:g>
</svg:svg>
<p> Voyez-vous quelque chose?</p>
</body>

Accueil Option Informatique   Des exemples modifiables avec PHP     Haut de page