CODEWITHSUNDEEP
javascriptjqueryhtmlsvg
Georg
Georg

Reputation: 219

Select ChildElement from object tag with jQuery

I made a webpage that loads an svg with the object tag

<object id="svgContainer" type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>

and want to display some content dynamically. When I include the svg direct inside the HTML it works fine

<svg id="svgVontainer">
  <circle cx="100" cy="100" r="2" id="edit" />
</svg>

JavaScript:

$(function() {
  $("#edit").hide();
});

But when I try the same code with the object it doesn't work.

Does someone know that problem and how to fix it?

EDIT: Here a jsFiddle so you can see what I mean http://jsfiddle.net/Ue7m7/.

Upvotes: 0

Views: 788

Answers (2)

SiZiOUS
SiZiOUS

Reputation: 658

If you only want to hide/show the SVG object tag, you can do it as usual with jQuery.

But if you want to deal with the content of the 'remote' SVG object, this seems to be possible but with some restrictions:

  • You need to have the SVG file in the same domain as your hosted page (due to the same security reasons as the iframe tag).
  • To manipulate SVG object tags with JS you need to have extra JS code, as shown here. I think with jQuery you could try $("#rect1").get(0).getSVGDocument() or something similar (I haven't tested that snippet). Check that link to learn more.
  • You have the possibility to include SVG fallback (if the SVG file can't be rendered).

Upvotes: 2

nepeo
nepeo

Reputation: 509

Try some vanilla instead

function hide(id){
    document.getElementById(id).style.display = "none";
}
function show(id){
    if(document.getElementById(id).style.display === "none")
         document.getElementById(id).style.display = "";
    else
        document.getElementById(id).style.display = "block"
}

Upvotes: 0

Related Questions