[SVG][JS] event handling

Flowyes

EDIT: Hab ich schon erledigt...

Ich hab mehrere kleine icons, die ich mittels SVG visualisiere. Diese verwenden ein 6-eckiges Polygon als clip-path. Das geht so:

Code

<g id="elem1">
  <image xlink:href="C:\bilder\1.jpg" width="200"
	height="150" clip-path="url(#zelle)" />
   <polygon points="0 75, 50 0, 150 0, 200 75, 150 150, 50 150, 0
	75" fill="none" stroke="#FF0000" stroke-width="3"/>	
</g>

Das ist z.B. mein erstes Icon. Alle schauen ungefähr gleich aus; der einzige Unterschied ist das id (hier: "elem1").

Was ich will ist folgendes: Wenn ein mouseOver-Event auf einem icon auftritt, soll das Polygon-Element von diesem icon die Farbe ändern (stroke-Attribut soll sich also ändern). Dafür hab ich diesen event-handler:

Code

<use xlink:href="#elem1" onmouseover="hervorheben(evt)" 
   onmouseout="hervorheben(evt)" />

Und nun zum Problem: Wie soll meine js-Funktion hervorheben() ausschauen, dass das geht? Ich kriegs irgendwie nicht hin. Ich hab im Moment folgendes dafür:

Code

<script type="text/ecmascript"> <![CDATA[
  function hervorheben(evt) {
	svgdoc = evt.getCurrentNode();
	elem = svgdoc.getAttribute('xlink:href');
	elem = elem.substr(1,elem.length);
	[color=Black]// ich weiß nicht wie da weitermachen soll...[/color]
    }
  ]]>
</script>

Kann mir jemand helfen? Wäre sehr dankbar...

EDIT: Hab ich schon erledigt...

Jetzt mitmachen!