Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Work with elements from embed or object tag

I have an svg graphics inserted in the page with an embed or object tag:

<object data="graphics.svg" type="image/svg+xml" id="graphics" />

The image is loading properly and I can see its SVG structure with the browser debugger. I see all the elements ids and attributes but it seems to me there is no way to select those elements with my scripts on page:

$('#graphics path').length; // 0 (jQuery)
$('path').length; // 0 anyway

Is it possible to browse the graphics elements as usual?

like image 731
ivkremer Avatar asked Jan 17 '13 10:01

ivkremer


People also ask

What is the difference between <embed> and <object> tags?

So, the <object> tag is currently the standard tag used to embed something on a page. But since currently, not all browsers display the information contained in the <object> tag, you may need to use the <embed> element within an <object> to provide support of more browsers and the validity of the document as well.

Why do we need to use <embed> element within an <object>?

But since currently, not all browsers display the information contained in the <object> tag, you may need to use the <embed> element within an <object> to provide support of more browsers and the validity of the document as well. Due to the fact that the <embed> tag is an HTML5 element, there isn’t any problem with the document validation in HTML5.

Which attributes does the <embed> tag support in HTML?

The <embed> tag also supports the Global Attributes in HTML. The <embed> tag also supports the Event Attributes in HTML. Most browsers will display the <embed> element with the following default values:

What is the HTML embed element?

The HTML embed element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.


1 Answers

It will show up as a separate document, similar to an iframe. You can access it like this:

var svg = document.getElementById('graphics').contentDocument

Note that it is important to wait until the svg file is loaded; you might want to put your code in the object element’s onload event handler, like this:

<object data="graphics.svg" type="image/svg+xml" id="graphics" />
<script>
  document.getElementById('graphics').addEventListener('load',function(){
    var svg = document.getElementById('graphics').contentDocument
    // do stuff, call functions, etc.
  })
</script>
like image 126
marcus erronius Avatar answered Sep 21 '22 00:09

marcus erronius