在Javascript中访问SVG DOM：对象标记与XMLSerializer？

我想访问SVG文件的DOM（我们称之为

/img/my_image.SVG

）。我知道实现这一目标的两种方法：

1。通过

对象

标记

<object id="my_image" data="/img/my_image.svg" type="image/svg+xml" style="height: 100%">
    Image can't be displayed
</object>

2。通过

XMLSerializer

<div id="my_image"></div>

问题：

这些方法中有一种明显更好吗？还是偏好的问题

在哪种情况下，我应该选择一种还是另一种

---

我使用过SVG并使用了object标记，但我也通过AJAX使用过SVG。但是ajax请求可能发生的情况是，如果代码太大，它可能会占用相当长的时间，甚至可能超过传输限制（我已经遇到过这种情况），代码到达时是不完整的

---

一般来说，这只是一个偏好的问题

经过一番尝试后，我的发现如下：

1。通过

对象

标记

<object id="my_image" data="/img/my_image.svg" type="image/svg+xml" style="height: 100%">
    Image can't be displayed
</object>

• 点击浏览器缓存
• 立即装载
• 将为SVG DOM创建一个新文档
  • 设置嵌入式SVG的样式需要不同的CSS文件，cf
  • 所有选择器都必须使用该新文档的上下文，例如：

    $('#my_id_in_svg', '#my_image').doWhatever();
    

2。通过

XMLSerializer

<div id="my_image"></div>

• 点击浏览器缓存
• 加载可以延迟（因为它需要AJAX调用）
• SVG DOM插入到文档的DOM中
  • 样式可以使用相同的CSS文件完成
  • 选择器可以使用文档的上下文

---

基于此，我想从现在开始我将使用第二种方法。

这将是一个偏好问题。第一种情况下，您将避免使用浏览器为您提供的ajax代码，从而节省代码行和不必要的复杂性。第二种情况是，如果您希望延迟加载svg，则可以通过请求按需加载来节省内存和网络。