我有以下HTML代码:
<!DOCTYPE html>
...
<div id="body">
<svg version="1.1" ...>
<defs>
<svg id="svgelid" width="24" height="24" x="0" y="0" version="1.1">
<rect x="0" y="0" width="100%" height="100%" fill="#282828" .../>
<text pointer-events="none" ...>X</text>
</svg>
</defs>
<g id="wrapper">
<svg version="1.1" id="element" width="24" height="24" ...>
<use id="useid" href="#svgelid" ...>
</svg>
</svg>
</svg>
</div>
和JavaScript代码:
document.getElementById('body').addEventListener('mouseover', function(e) { // and then mouseout
...
});
如果将鼠标悬停在#element SVG上，则该eventListener中的
e.relatedTarget指向中的元素。我需要获取#element SVG元素。我试过了:
e.relatedTarget.correspondingUseElement.parentNode，它在Firefox / Chrome中工作正常，但在IE中却没有(我已经测试了IE 9和11)。 IE中未定义e.relatedTarget.correspondingUseElement，而e.relatedTarget.parentNode是#svgelid元素，因此中的那个。我也尝试过
e.relatedTarget.ownerSVGElement-在Firefox / Chrome上效果很好，但在Internet Explorer上效果不佳，这使我#svgelid元素。谁能告诉我为什么Internet Explorer中没有
e.relatedTarget.correspondingUseElement？ 最佳答案
不幸的是，我无法回答您的问题，但也许我正在为您的问题提供解决方案。
我不确定这是否对您有用，但我遇到了同样的问题。
问题如下:在IE中，触发事件的对象是矩形，而在FF / Chrome等中，<use>对象本身触发了事件。
就我而言，以下代码解决了这个问题:
var target = e.target
var original;
if ((window.SVGElementInstance)&&(target instanceof SVGElementInstance))
{
original = target.correspondingElement;
target = target.correspondingUseElement;
}
else
{
original = target;
}
如果现在使用
original，则该对象为单个对象(矩形和其他形状)，如果使用目标，则使用整个use对象。但是，此代码仍然存在错误(脚本和浏览器无法与
<use>标记一起正常工作)并且某些功能仍无法正常工作(例如，在FF / Chrome中抚摸使用对象等)。这是IE唯一一次比其他浏览器更好的工作^^