gpt4 book ai didi

javascript - SVG:relatedTarget.correspondingUseElement 在 IE 中未定义

转载 作者:行者123 更新时间:2023-11-29 15:37:45 24 4
gpt4 key购买 nike

我有以下 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)。 e.relatedTarget.correspondingUseElement 在 IE 中未定义,e.relatedTarget.parentNode 是 #svgelid 元素,所以在 中。

我还尝试了 e.relatedTarget.ownerSVGElement 并再次尝试 - 它在 Firefox/Chrome 上运行良好,但在 Internet Explorer 上运行不佳,这给了我 #svgelid 元素。

谁能告诉我为什么 e.relatedTarget.correspondingUseElement 在 Internet Explorer 中未定义?

最佳答案

很遗憾,我无法回答您的问题,但也许我正在为您的问题提供解决方案。我不确定这是否适合你,但我遇到了同样的问题。问题如下:在 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 唯一一次比其他浏览器运行得更好^^

关于javascript - SVG:relatedTarget.correspondingUseElement 在 IE 中未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25404694/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com