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?
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.
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.
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:
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With