与嵌入或对象标记中的元素一起工作

Question

我在页面中使用嵌入或对象标签插入了一个SVG图形：

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

图片已经正确加载，我可以通过浏览器调试工具看到它的SVG结构。我能够看到所有元素的id和属性，但是似乎没有办法在页面上使用我的脚本选择这些元素:

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

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

- ivkremer

---

我不知道jQuery本身是否可以原生地执行此操作，但是快速的谷歌搜索出现了这个可能可以解决问题的插件：http://keith-wood.name/svg.html - Ashley Sheridan

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>

- marcus erronius

---

谢谢！我在寻找答案时看到了这个片段。现在我知道它确实有效，但我无法检查SVG对象是否已加载。我需要像$('#graphics').load(function() { /* ... */ }这样放置一些东西吗？ - ivkremer

是的，那应该可以。我用普通的JavaScript示例进行了编辑，但对于jQuery也应该适用。 - marcus erronius

嗯... $('#graphics')[0].addEventListener('load', function(){}) 可以工作，但是 $('#graphics').load(function(){}) 不行... 我在谷歌搜索解决方案时看到了你的最终片段，但我没有完全尝试它 - 这就是我犯错误的地方。 - ivkremer

使用这种方法是否可以定位SVG内部的元素（组、路径）？ - snow