logo标签列表

SVG：在IE中，relatedTarget.correspondingUseElement未定义

javascriptinternet-explorerdomsvg
3

I have the following HTML code:

<!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上，则事件侦听器中的e.relatedTarget指向
1
correspondingUseElement在Firefox中可以正常工作吗？我不这么认为，因为它在那里没有实现。 - Robert Longson
是的，你说得对，我的解释有误 - 在Firefox中，e.relatedTarget返回USE元素，在Chrome中，e.relatedTarget.correspondingUseElement可以工作，但我无法让它在IE中工作，correspondingUseElement自IE9以来就已实现... - Paul
1个回答
1

很抱歉我无法回答你的问题，但也许我有解决您问题的方案。 我不确定这是否适用于您，但我遇到了同样的问题。 问题是：在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，那么对象就是单独的矩形和其他形状；如果您使用的是 target，则整个 use 对象会被使用。 然而，这段代码仍然存在漏洞（脚本和浏览器无法很好地处理 <use> 标签），并且某些功能仍然不起作用（例如，在 FF/Chrome 中描边使用对象）。这是唯一一次 IE 比其他浏览器表现更好的时候^^
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接