如何在 .hover 变量路径中使用 .contentDocument？答案

【问题标题】：How to use .contentDocument in a .hover variable path?如何在 .hover 变量路径中使用 .contentDocument？
【发布时间】：2020-05-08 07:33:30
【问题描述】：

我有一个这样的 SVG 加载：

<object id="svg-object" type="image/svg+xml" width="1400px" height="900px" data="media/1.svg?"></object>

然后我有一个函数可以调用此 svg 中的一个元素并对其应用样式就可以了。这是使我正确获取元素的 onload 事件：

window.onload=function() {
    var svgObject = document.getElementById('svg-object').contentDocument;
    var element = svgObject.getElementById('sprite1');
};

但是我如何为同一个元素设置一个 .hover 呢？我试过了：

$('#${element}').hover(function(e) { }

但没有运气。

另外，我如何将 svgObject 变量应用于整个类，如路径或多边形？我在本地内联 SVG 上使用它，它工作正常： $("多边形，路径").hover(function(e) { }

我希望这也适用于嵌入在 svg 中的对象。

【问题讨论】：

我根本不使用 jquery，但在 javascript 中你会这样做 element.addEventListener("mouseover", () => { //code })
你能加一个runnable example via stack snippets吗？
请帮忙？我在下面发布了更多内容。但我不认为我可以使用嵌入式对象设置 sn-p。

标签： object svg getelementbyid

【解决方案1】：

抱歉，我无法将外部 svg 放入 sn-p（或者至少我不知道如何），因为外部 URL 不会加载到对象中。它需要作为对象加载才能看到问题。

有什么帮助吗？

此外，这里的代码可以从脚本中定义元素颜色，但鼠标悬停也不起作用。（尝试代替悬停）

    window.onload=function() {
    var svgObject = document.getElementById('svgEmb').contentDocument;
    var element = svgObject.getElementById('left');
    element.style.fill = "blue";
    element.style.stroke ="blue";
};
element.addEventListener("mouseover", function() {
    element.style.fill = "red";
    element.style.stroke ="red";
});

【讨论】：