SVG -> JS -> innerHTML -> div manipulieren

[cyrez]

mahlzeit ;)

ich würde gern beim mouseover/mouseout auf einem SVG-objekt den inhalt eines divs ändern.
die svg-grafik ist direkt ins dokument eingebettet, da nicht sonderlich umfangreich und mehr zu testzwecken was man damit so dynamisch generieren kann.

mal grob in code dargestellt:

<div id="div_text">... hallooo ...</div>

<svg:svg width="100" height="100">
svg:g
    <svg:circle cx="50" cy="50" r="30" style="fill:#FF0000"
      onmouseover="document.getElementById('div_text').innerHTML='... hallooo siiieee ...';"
      onmouseout="document.getElementById('div_text').innerHTML='... hallooo ...';" />
</svg:g>
</svg:svg>

ich hab mich schon durchgegoogelt, diverse foren und französische seiten abgeklappert und viele varianten durchprobiert - aber irgendwie basteln die alle nur SVG-intern mit javascript rum, in keinem suchergebnis wurde versucht das restliche dokument zu manipulieren...

ist das also überhaupt möglich? wenn ja, wie?

danke schonmal :)

[Arne]

ist das also überhaupt möglich? wenn ja, wie?

jo, ist möglich :)

und zwar indem du aus dem umschliessenden Dokument heraus Eventlistener  für elemente des svgs erstellst.

<div id="div_text">... hallooo ...</div>
<script type="text/javascript">

var svgdoc = document.getElementById('svg').getSVGDocument();
var circle = svgdoc.getElementById('circle');
circle.addEventListener('mouseover', testFunction, 'false');

function testFunction(event) {
alert(event);
}
</script>
<svg:svg id="svg" width="100" height="100">
svg:g
    <svg:circle id="circle" cx="50" cy="50" r="30" style="fill:#FF0000"/>
</svg:g>
</svg:svg>

so müsste das prinzipiell gehen, hab es allerdings bisher nur mit über object tags eingebundene svgs getestet.

gruß
arne