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

Posted 2023-03-13

【中文标题】使用嵌入或对象标签中的元素

【英文标题】：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

【参考方案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 中的元素（组、路径）？