javascript - 在 Javascript 中访问 SVG DOM : object tag vs XMLSerializer?

Question

我想访问 SVG 文件的 DOM(我们称之为 /img/my_image.svg)。我知道有两种方法可以实现这一目标:

<强>1。通过object标签

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

JS代码:

$('#my_image').on('load', function () {
    $(this.contentDocument).find('whatever').doWhatever();
}); 

<强>2。通过 XMLSerializer

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

JS代码:

$.get("/img/my_image.svg", function (data) {
    $('#my_image').html(new XMLSerializer().serializeToString(data.documentElement));
    $('#my_image').find('whatever').doWhatever();
});

问题:

1. 这些方法中的一种明显更好吗？或者这是一个偏好问题？
2. 在哪种情况下我应该选择其中之一？

Answer 1

经过一番尝试后，以下是我的发现:

<强>1。通过object标签

• 访问浏览器缓存
• 立即加载

• 为 SVG DOM 创建一个新文档

  • 设置嵌入 SVG 的样式需要不同的 CSS 文件，参见 How to apply a style to an embedded SVG?

  • 所有选择器必须使用该新文档的上下文，例如:

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

<强>2。通过 XMLSerializer

• 访问浏览器缓存
• 可以推迟加载(因为它需要 AJAX 调用)
• SVG DOM 被插入到文档的 DOM 中
  • 可以使用同一个 CSS 文件来完成样式设置
  • 选择器可以使用文档的上下文

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