How to use .contentDocument in a .hover variable path?

问题

I have an SVG loading like this:

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

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

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

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

But no luck.

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) { }

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

回答1:

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.

Any help?

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

来源：https://stackoverflow.com/questions/59854667/how-to-use-contentdocument-in-a-hover-variable-path

标签

object

svg

getelementbyid