Select ChildElement from object tag with jQuery

Question

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/.

It works for my side... See here : http://jsfiddle.net/db5d8/, comment hide line to show svg... — j809, Jul 16 '14 at 10:42
As I said, it is working if you use the svg tag. But I want to use the — Georg, Jul 16 '14 at 10:46
Your fiddle shows this error: `Uncaught HierarchyRequestError: Failed to execute 'webkitCreateShadowRoot' on 'Element': Author-created shadow roots are disabled for this element.`, when I removed svg and had only object in it... — j809, Jul 16 '14 at 11:10

score 2 · Accepted Answer · answered Jul 16 '14 at 11:36

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).

Thank you so much, it wokred. (Later I'll post a JSFiddle with working code if someone gets the same issue) — Georg, Jul 16 '14 at 12:04

score 0 · Answer 2 · answered Jul 16 '14 at 10:37

0

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

answered Jul 16 '14 at 10:37

nepeo

509
2
9

Unfortunatelly this code is not working. ```document.getElementById(id)``` is null – Georg Jul 16 '14 at 10:44
are you using '#edit' or 'edit'? should be hide('edit') – nepeo Jul 16 '14 at 10:53
Yes I did so. I also used ```console.log(document.getElementById("id));``` to see what the result is. – Georg Jul 16 '14 at 10:55
`document.getElementById('svgContainer').style.display = "none"` I tried that on your – nepeo Jul 16 '14 at 11:02
@nepeo And what if he wants to hide only one of the rectangles? – j809 Jul 16 '14 at 11:08
the id values of the SVG file are not visible to JS, although i believe you can change the SVG to make them visible http://stackoverflow.com/questions/16566377/why-is-getelementbyid-failing-for-an-svg – nepeo Jul 16 '14 at 11:18
Indeed I only want to hide a rectangle, not the whole – Georg Jul 16 '14 at 11:35

Select ChildElement from object tag with jQuery

2 Answers2