使用嵌入或对象标记中的元素 [英] 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文件是很重要的。您可能希望将代码放在对象元素的 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屋！