SVG mouse events work in Firefox4 but not in IE8

Question

I have a standalone SVG file and a separate Javascript file to deal with mouse events triggered from the SVG file. The projects works well with Firefox but somehow I got problems with IE when managing mouse events: I get this error message:

"clientx is null or not an object".

The SVG image is printed OK though.

Do you have any idea what's wrong with my code (see below)?

SVG document

<?xml version="1.0" standalone="no"?>
<svg width="1100" height="5990" version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)" >
<script xlink:href="desc.js"/>

<g onmouseout="h(evt)">" stroke-width="1"/>
<polygon points="35,20 86,20 96,35 86,50 35,50" style="fill:grey"    onmousemove="s(evt,'someTxt')" onclick="m(evt, 'NGR_a00010')"/>
<polygon points="99,20 138,20 148,35 138,50 99,50" style="fill:grey" onmousemove="s(evt,'someTxt someTxt')" onclick="m(evt, 'NGR_a00020')"/>
</g>

<rect class="tooltip_bg" id="tooltip_bg"   x="0" y="0" rx="4" ry="4"  width="55" height="17" visibility="hidden"/> 
  <text class="tooltip" id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text> 
</svg>

Javascript

function init(evt)
{
    if ( window.svgDocument == null )
    {
    svgDocument = evt.target.ownerDocument;
    }

    tooltip = svgDocument.getElementById('tooltip');
    tooltip_bg = svgDocument.getElementById('tooltip_bg');
}


function s(evt, mouseovertext)
{
    var posx = 0;
var posy = 0;
if (!evt) var e = window.event;
if (evt.pageX || evt.pageY)     {
    posx = evt.pageX;
    posy = evt.pageY;
}
else if (e.clientX || e.clientY)    {
    posx = evt.clientX + document.body.scrollLeft
        + document.documentElement.scrollLeft;
    posy = evt.clientY + document.body.scrollTop
        + document.documentElement.scrollTop;
}

  tooltip.setAttributeNS(null,"x",posx+11);
    tooltip.setAttributeNS(null,"y",posy+27);
    tooltip.firstChild.data = mouseovertext ;
    tooltip.setAttributeNS(null,"visibility","visible");

    length = tooltip.getComputedTextLength();
    tooltip_bg.setAttributeNS(null,"width",length+8);
    tooltip_bg.setAttributeNS(null,"x",posx+8);
    tooltip_bg.setAttributeNS(null,"y",posy+14);
    tooltip_bg.setAttributeNS(null,"visibility","visibile");        
}

function h(evt)
{
    tooltip.setAttributeNS(null,"visibility","hidden");
    tooltip_bg.setAttributeNS(null,"visibility","hidden");
}

  function g(evt, locus_tag)
  {
window.open("http://www.ncbi.nlm.nih.gov/gene?term=" + locus_tag);
  }


  function m(evt, txt)
  {
if (evt.type == "click" && evt.detail == 2)//if we got a double click, for some reason onblclick does not work
  {          
  window.open("http://www.ncbi.nlm.nih.gov/gene?term=" + txt);
      } 
  }

Answer 1

IE8 doesn't support SVG.

There are Javascript tools available to help with that, but natively it doesn't support it.

Of the tools I mentioned, my favourite is Raphael, but Raphael is a library for drawing the graphics; since you already have the SVG in your code, you may find a simple conversion library is more useful. Something like one of these perhaps: http://code.google.com/p/svg2vml/ or this: http://code.google.com/p/svgweb/

Since you say that the SVG images are working in your page, I would say that you're probably already using one or other of these tools (possibly one of the ones I linked above, possibly another one -- there's quite a few of them). But my guess would be that the tool you're using doesn't include support for manipulating the SVG object with Javascript.

You may therefore need to try another tool if you want this feature.

Answer 2

As Spudley's answer says, IE8 doesn't support SVG.

If the image is appearing on your page, thereare a few possibilities:

• Something in your development stack may be converting it to a raster image (such as a PNG): right click the image and select "Properties", then see what value is reported for "Type".
• You may have a browser plugin installed that renders SVGs (but does not provide the JavaScript interface). Try running IE8 in Safe Mode.

Internet Explorer 9 does support SVG, however, so an IE upgrade, where possible, will solve that problem.