处理来自嵌入或对象标签的元素 [英] Work with elements from embed or object tag
问题描述
我在页面中插入了一个带有嵌入或对象标签的 svg 图形:
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" />
图像正在正确加载,我可以使用浏览器调试器看到它的 SVG 结构.我看到了所有元素的 id 和属性,但在我看来没有办法用我的脚本在页面上选择这些元素:
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?
推荐答案
它将显示为一个单独的文档,类似于 iframe.您可以像这样访问它:
It will show up as a separate document, similar to an iframe. You can access it like this:
var svg = document.getElementById('graphics').contentDocument
注意等待svg文件加载完成很重要;您可能希望将代码放在 object
元素的 onload
事件处理程序中,如下所示:
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>
这篇关于处理来自嵌入或对象标签的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!