使用嵌入或对象标签中的元素答案

【问题标题】：Work with elements from embed or object tag使用嵌入或对象标签中的元素
【发布时间】：2012-12-31 20:29:01
【问题描述】：

我在页面中插入了一个带有嵌入或对象标记的 svg 图形：

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

图像正在正确加载，我可以使用浏览器调试器查看其 SVG 结构。我看到了所有元素的 id 和属性，但在我看来，无法使用页面上的脚本选择这些元素：

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

是否可以像往常一样浏览图形元素？

【问题讨论】：

我不知道 jQuery 本身是否可以做到这一点，但快速的谷歌搜索产生了这个插件，可能会成功：keith-wood.name/svg.html

标签： javascript jquery object svg embed

【解决方案1】：

它将显示为一个单独的文档，类似于 iframe。你可以这样访问它：

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

请注意，等待 svg 文件加载很重要；您可能希望将您的代码放入 object 元素的 onload 事件处理程序中，如下所示：

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

【讨论】：

谢谢！我在尝试搜索答案时看到了这个 sn-p。现在我看到它确实有效，但我无法检查是否加载了 SVG 对象。我必须输入$('#graphics').load(function() { /* ... */ }之类的东西吗？
是的，应该可以。我用一个普通的 javascript 示例进行了编辑，但这应该适用于 jQuery。
嗯...$('#graphics')[0].addEventListener('load', function(){}) 有效，但$('#graphics').load(function(){}) 无效...我在谷歌搜索解决方案时看到了您的最终 sn-p，但我没有完全尝试过 - 那就是我制作的地方一个错误。
是否可以使用此方法定位 svg 中的元素（组、路径）？