Discussion :

[yo_haha]

Bonjour,

Dans ma page XHTML j'ai une balise embed qui a comme source un fichier XML pour créer des entités SVG.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<embed src="image.svg" width="1000" height="1000" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />

J'ai donc des éléments SVG comme plugin dans ma page. Je veux accéder à ces éléments SVG et leur associer des événements en l'occurrence l'événement onclick.
Voici le fichier xml (*.svg)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?xml version='1.0' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg style='cursor:crosshair' width='1000' height='1000' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<path fill='lightsteelblue' stroke='midnightblue' stroke-width='5' d='M 10 10 L 10 20 20 20 20 15 Z '/>
<path fill='lightsteelblue' stroke='midnightblue' stroke-width='5' d='M 100 100 L 150 100 200 300 100 350 Z '/>
<path fill='lightsteelblue' stroke='midnightblue' stroke-width='5' d='M 50 500 L 100 650 65 800 20 700 Z '/>
</svg>

Ce fichier est créé avec PHP suite à des requêtes.
Pour attacher l'événement onclick à l'élément svg, j'ai créé un script JS qui permet d'accéder au document SVG. Le voici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}

Ensuite j'accède au SVG dans un script JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var doc =loadXMLDoc("image.svg");
				var svg = doc.getElementsByTagName("svg")[0];

Finalement, je traite les instructions à exécuter dans le cas d'un click sur la balise svg (affichée sur ma page)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

svg.addEventListener("click", function() {...},false);

Lorsque je clique sur le svg : RIEN !

Je ne sais pas où est l'erreur ...

[sekaijin]

niet niet niet
lorsque tu fait un embed tu donne la main à un plugin qui charge le SVG
lorsque tu fait un loadXMLDoc tu charge une deuxième fois le svg
tu as donc deux DOM SVG celui qui est dans le plugin et celui qui est dans ton doc principal (chargé par loadXMLDoc)

j'imagine que tu utilise un plugin comme celui-d'adobe ou le composant interne de FireFox ou de webKit

je te conseille de lire la doc de ses plugin pour savoir comment accéder au dom du SVG chargé car c'est le seul moyen d'inter agir avec le SVG qui s'exécute

le principe est le suivant mettre un id sur le embed

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<embed scr='my.svg' id='mySVG' ....>

puis dans le javascript récupérer le dom généré par le plugin

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
mySvgDom=document.getElementById('mySVG').getSVGDocument();
//accéder à un élément du dom SVG
myRect=mySvgDom.getElementById('aRect');
//ajouter onclick su le rect
myRect.addEventListener("click", function() {...},false);

ceci est le principe de base mais ça dépend surtout du plugin utilisé
pour safari google chrome voir la doc de Webkit pour firefox voir la doc de mozilla
et pour tout autre plugin voir la doc du plugin

A+JYT

[yo_haha]

ça marche ! Merci beaucoup