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

Question

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

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

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

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

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

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