Javascript SVG鼠标事件在Firefox4中工作,但在IE8中不工作
我有一个独立的SVG文件和一个单独的Javascript文件来处理从SVG文件触发的鼠标事件。这些项目与Firefox配合得很好,但不知何故,我在管理鼠标事件时遇到了IE问题:我收到以下错误消息: “clientx为空或不是对象” SVG图像打印正常。 你知道我的代码有什么问题吗(见下文) SVG文档Javascript SVG鼠标事件在Firefox4中工作,但在IE8中不工作,javascript,firefox,svg,internet-explorer-8,dom-events,Javascript,Firefox,Svg,Internet Explorer 8,Dom Events,我有一个独立的SVG文件和一个单独的Javascript文件来处理从SVG文件触发的鼠标事件。这些项目与Firefox配合得很好,但不知何故,我在管理鼠标事件时遇到了IE问题:我收到以下错误消息: “clientx为空或不是对象” SVG图像打印正常。 你知道我的代码有什么问题吗(见下文) SVG文档 <?xml version="1.0" standalone="no"?> <svg width="1100" height="5990" version="1.1" xmlns
<?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>
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不支持SVG 有Javascript工具可以帮助实现这一点,但它本身不支持它 在我提到的工具中,我最喜欢的是Raphael,但Raphael是一个用于绘制图形的库;由于您的代码中已经包含SVG,您可能会发现一个简单的转换库更有用。可能是这样的:或者这个: 既然您说SVG图像在您的页面中工作,我想说您可能已经在使用这些工具中的一个或另一个(可能是我上面链接的其中一个,可能是另一个--其中有很多)。但我猜您使用的工具不支持使用Javascript操作SVG对象
因此,如果需要此功能,您可能需要尝试其他工具。IE8不支持SVG 有Javascript工具可以帮助实现这一点,但它本身不支持它 在我提到的工具中,我最喜欢的是Raphael,但Raphael是一个用于绘制图形的库;由于您的代码中已经包含SVG,您可能会发现一个简单的转换库更有用。可能是这样的:或者这个: 既然您说SVG图像在您的页面中工作,我想说您可能已经在使用这些工具中的一个或另一个(可能是我上面链接的其中一个,可能是另一个--其中有很多)。但我猜您使用的工具不支持使用Javascript操作SVG对象 因此,如果需要此功能,您可能需要尝试其他工具。如前所述,IE8不支持SVG 如果图像出现在您的页面上,有几种可能:
- 开发堆栈中的某些内容可能正在将其转换为光栅图像(例如PNG):右键单击图像并选择“属性”,然后查看“类型”报告的值
- 您可能安装了一个呈现SVG的浏览器插件(但不提供JavaScript接口)。尝试在安全模式下运行IE8
- 开发堆栈中的某些内容可能正在将其转换为光栅图像(例如PNG):右键单击图像并选择“属性”,然后查看“类型”报告的值
- 您可能安装了一个呈现SVG的浏览器插件(但不提供JavaScript接口)。尝试在安全模式下运行IE8
Internet Explorer 9确实支持SVG,因此,如果可能,IE升级将解决该问题。您在IE中看到SVG绘图了吗?您在IE中看到SVG绘图了吗?谢谢。嗯,我不能在Windows XP上安装IE9。。。在IE8上,我让Adobe SVG viewer进行渲染,但JS似乎不起作用,谢谢。嗯,我不能在Windows XP上安装IE9。。。在IE8上,我让Adobe SVG viewer进行渲染,但JS似乎不起作用