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();
});

问题：

其中一种方法明显更好吗？或者这是一个偏好的问题？
在哪种情况下我应该更喜欢其中一种？

Answer 1

我使用过SVG并使用了对象标签，但我也通过AJAX使用了SVG。但是ajax请求会发生什么，如果代码太大，可能会花费相当多的时间，甚至可能超过传输限制（就像我已经发生的那样），代码到达时不完整。

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

Answer 2

经过一段时间的游戏后，我的调查结果如下：

<强> 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文件
- 选择器可以使用文档的上下文

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

在Javascript中访问SVG DOM：object tag vs XMLSerializer？

2 个答案: