SVG鼠标事件在Firefox4中工作，但不在IE8中 [英] SVG mouse events work in Firefox4 but not in IE8

问题描述

我有一个独立的SVG文件和一个单独的Javascript文件来处理从SVG文件触发的鼠标事件。该项目与FF工作得很好，但不知何故，当我管理鼠标事件时，我得到了问题：我得到这个错误消息：客户端为空或不是对象。 SVG图像打印OK

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

$ b $ p

感谢++

SVG文档

 <？xml version =1.0standalone =no？> 
< svg width =1100height =5990version =1.1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http：// www。 w3.org/1999/xlinkonload =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,50style =fill：greyonmousemove =s（evt，'someTxt'）onclick =m（evt，'NGR_a00010'）/> 
< polygon points =99,20 138,20 148,35 138,50 99,50style =fill：greyonmousemove =s（evt，'someTxt someTxt'）onclick =m（evt，'NGR_a00020'） /> 
< / g> 
 
< rect class =tooltip_bgid =tooltip_bgx =0y =0rx =4 4width =55height =17visibility =hidden/> 
 < / svg> 
  

> Javascript

 函数init（evt）
 {
 if（window.svgDocument = = null）
 
 svgDocument = evt.target.ownerDocument 
 
 $ b tooltip = svgDocument.getElementById（'toolti p_bg'）; 
} 
 
 
函数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）; 
 
 
函数h（evt）
 {
 tooltip.setAttributeNS（null，visibility，hidden）; 
 tooltip_bg.setAttributeNS（null，visibility，hidden）; 
 
 
函数g（evt，locus_tag）
 {
 window.open（http://www.ncbi.nlm.nih.gov/gene？ term =+ locus_tag）; 
 
 
 
函数m（evt，txt）
 {
 if（evt.type ==click&& evt.detail == 2）//如果我们有双击，出于某种原因onblclick不起作用
 {
 window.open（http://www.ncbi.nlm.nih.gov/gene？ term =+ txt）; 
 
 
 $ / code> 




解决方案

不支持SVG。

有Javascript工具可以提供帮助，但本地不支持。

在我提到的工具中，我最喜欢的是拉斐尔（Raphael），但拉斐尔（Raphael）是绘制图形的库;既然你已经在你的代码中有SVG，你可能会发现一个简单的转换库更有用。像这样的其中一个： http://code.google.com/p/svg2vml/或这个： http://code.google.com/p/svgweb/

既然你说SVG图像在你的页面中工作，我会说你可能已经在使用这些工具中的一个或其他工具了（可能是我链接的其中一个以上，可能还有一个 - 其中有不少）。但我的猜测是，你正在使用的工具不包括支持用JavaScript处理SVG对象。

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

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 FF but somehow I got problems with IE when managing mouse events: I get this error messages: "clientx is null or not an object". The SVG image is printed OK though.

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

Thanks ++

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

解决方案

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.

这篇关于SVG鼠标事件在Firefox4中工作，但不在IE8中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！