Home/ Questions/Q 5981157
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T21:54:16+00:00

I have a standalone SVG file and a separate Javascript file to deal with

  • 0

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);
      } 
  }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0