[SVG] Problème utilisation use, g et javascript

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:

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.