在Javascript中訪問SVG DOM：object tag vs XMLSerializer？

我想訪問一個SVG文件的DOM（我們稱之爲/img/my_image.svg）。我知道兩種方法來實現這一目標：在Javascript中訪問SVG DOM：object tag vs XMLSerializer？

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

問題：

是這些方法中的一個明顯更好？或者這是一個偏好問題？
在哪種情況下我應該選擇其中一種？

來源

2017-06-02 Métoule

這將是一個偏好問題。第一種情況你會避免使用瀏覽器爲你保存代碼行和不必要的複雜性的ajax代碼。你可以使用第二種情況，如果你想延遲加載svg，通過點播請求來節省內存和網絡。 – Nirus

的問題有點打轉轉之後，這裏是我的發現：

1.通過object標籤

打瀏覽器緩存
立即加載
新文檔i S爲SVG DOM
- 的樣式嵌入SVG創建需要不同的CSS文件，CF How to apply a style to an embedded SVG?
- 所有選擇必須使用新的文件的情況下，例如：
```
$('#my_id_in_svg', '#my_image').doWhatever(); 
```

2。通過XMLSerializer

點擊瀏覽器的緩存
加載可以推遲（因爲它需要一個AJAX調用）
SVG DOM被插入到文檔中的DOM
- 造型可以用做相同的CSS文件
- 選擇器可以使用文檔的上下文

基於此，我想我會從現在開始使用第二種方法。

來源

2017-06-02 11:40:26

我已經使用SVG並使用了對象標籤，但我也通過AJAX使用了SVG。但是，ajax請求可能會發生的情況是，如果代碼太大，則可能需要相當長的時間，甚至可能超過傳輸限制（如我已經發生的那樣），代碼到達不完整。

在一般情況下，它只是偏好

來源

2017-06-02 10:42:58 GeekSilva

在Javascript中訪問SVG DOM：object tag vs XMLSerializer？

回答

相關問題