Discussion :

[Mormegil]

Salutations,

Je n'arrive pas à faire fonctionner une fonction javascript sur des éléments issus de <use> et groupé par un <g>. Par contre les différentes fonctions que j'ai essayé fonctionne toute sur un polygon tout simple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?xml version="1.0" encoding="iso-8859-1" ?>
<?xml-stylesheet href="exemple-2.css" type="text/css" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
<script type="text/ecmascript">
<![CDATA[
function coloreGris1(evt) {
var hexa = evt.target;
hexa.setAttribute("fill", "grey");
}
function coloreGris2(evt) {
var target = evt.target;
var qualif = target.correspondingUseElement || target;
qualif.setAttribute("fill", "grey");
}
function coloreGris3(evt) {
svgdoc = evt.target.ownerDocument;
idCible = evt.target.getAttribute("id");
svgdoc.getElementById(idCible).setAttribute("fill", "grey")
}
function coloreVert(evt) {
var hexa = evt.target;
hexa.setAttribute("fill", "#8DD41F");
}
// ]]>
</script>
 
<defs>
<polygon id="hexagone" fill="#8DD41F" stroke="grey" stroke-width="1"
points="16.2,0 32.4,9.375 32.4,28.125
16.2,37.5 0,28.125 0,9.375" />
</defs>
 
<g onmouseover="coloreGris1(evt)" onmouseout="coloreVert(evt)">
<use xlink:href="#hexagone" x="32.4" y="0" id="0_1" />
<use xlink:href="#hexagone" x="64.8" y="0" id="0_2" />
<use xlink:href="#hexagone" x="16.2" y="28.125" id="1_0" />
<use xlink:href="#hexagone" x="48.6" y="28.125" id="1_1" />
<use xlink:href="#hexagone" x="81" y="28.125" id="1_2" />
<use xlink:href="#hexagone" x="0" y="56.25" id="2_0" />
<use xlink:href="#hexagone" x="32.4" y="56.25" id="2_1" />
<use xlink:href="#hexagone" x="64.8" y="56.25" id="2_2" />
 
</g>
<polygon id="testtt" fill="#8DD41F" stroke="grey" stroke-width="1" onmouseover="coloreGris1(evt)" onmouseout="coloreVert(evt)"
points="16.2,0 32.4,9.375 32.4,28.125
16.2,37.5 0,28.125 0,9.375" />
</svg>

Si quelqu'un a une idée, merci de votre aide.

[Mormegil]

Si ça peut aider quelqu'un, après plusieurs tests, j'ai pu découvrir que le code fonctionnait. Mon changement de couleur n'était pas visible car dans le <defs> j'y avais inscris la couleur de fond. L'instanciation par le <use> conserve alors l'attribut avec cette valeur quelque soit la modification, c'est ce que j'en ai déduis.
Ainsi il m'a suffit de reporter les attributs que je voulais pouvoir modifier ultérieurement dans la balise <g>.

Donc c'est une histoire d'instanciation, de DOM, que je ne maitrise malheureusement pas encore.