SVG 鼠标事件在 Firefox4 中有效，但在 IE8 中无效

Question

我有一个独立的 SVG 文件和一个单独的 Javascript 文件来处理从 SVG 文件触发的鼠标事件。这些项目在 Firefox 上运行良好，但不知何故我在管理鼠标事件时遇到了 IE 问题：我收到以下错误消息：

“clientx 为空或不是对象”。

SVG 图像打印正常。

你知道我的代码有什么问题吗（见下文）？

SVG 文档

<?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 不支持 SVG。

有 Javascript 工具可以帮助解决这个问题，但它本身不支持它。

在我提到的工具中，我最喜欢的是 Raphael，但 Raphael 是一个用于绘制图形的库；由于您的代码中已经包含 SVG，您可能会发现一个简单的转换库更有用。可能是其中之一：http://code.google.com/p/svg2vml/ 或这个：http://code.google.com/p/svgweb/

既然您说 SVG 图像在您的页面中工作，我想说您可能已经在使用这些工具中的一个或其他（可能是我上面链接的一个，也可能是另一个 - 有很多其中少数）。但我的猜测是您使用的工具不支持使用 Javascript 操作 SVG 对象。

因此，如果您想要此功能，您可能需要尝试其他工具。

Answer 2

正如Spudley's answer 所说，IE8 不支持 SVG。

如果图片出现在您的页面上，有几种可能：

• 您的开发堆栈中的某些内容可能会将其转换为光栅图像（例如 PNG）：右键单击图像并选择“属性”，然后查看报告的“类型”值。
• 您可能安装了呈现 SVG 的浏览器插件（但不提供 JavaScript 界面）。尝试在安全模式下运行 IE8。

不过，Internet Explorer 9 确实支持 SVG，因此在可能的情况下升级 IE 可以解决这个问题。