如何在.hover变量路径中使用.contentDocument? [英] How to use .contentDocument in a .hover variable path?

问题描述

我有这样的SVG加载:

I have an SVG loading like this:

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

然后我有了一个函数，该函数可以在此svg中调用一个元素，并对其应用样式.以下是onload事件，可让我正确地使用该元素:

I then have a function that works calling out one element in this svg and apply a style to it just fine. Here is the onload event that is working for getting me the element properly:

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

但是如何为同一元素设置.hover呢?我尝试过:

But how do I set a .hover even in for this same element? I've tried:

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

但是没有运气.

此外，如何将svgObject变量应用于路径或多边形等整个类?我在本地内联SVG上使用了它，并且工作正常: $("polygon，path").hover(function(e){}

Also, how can I apply the svgObject variable to a whole class like path or polygon? I use this on a local inline SVG and it works fine: $("polygon, path").hover(function(e) { }

我希望它也可以处理svg中嵌入的对象.

I would like this to work on the object embedded in the svg also.

推荐答案

对不起，我无法将外部svg放入代码段(或者至少我不知道如何)，因为外部URL不会加载到对象中.它需要作为对象加载，以便您查看问题.

Sorry, I am not able to put an external svg in snippet (or at least I don't know how) as external URL will not load in an object. And it needs to load as an object for you to see the issue.

有帮助吗?

此外，这是可以从脚本定义元素颜色的代码，但是鼠标悬停也不起作用. (尝试而不是悬停)

Also, here is code that works defining element color from script but mouseover not working either. (tried instead of hover)

    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";
});

这篇关于如何在.hover变量路径中使用.contentDocument?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！