無法使用Javascript在移動Safari中讀取SVG元素內容

Question

為了重用某些SVG對象，我在SVG元素中定義了符號，這些符號寫在DOM的頂部。 要顯示SVG，我可以執行以下操作：

<svg><use xlink:href="#symbol-identifier" /></svg>

要為某些SVG設置動畫，我使用Snap.svg，但似乎無法從xlink引用的SVG創建Snap對象。 為了解決這個問題，我想在運行時將SVG內容（已經存在於DOM中）注入當前使用xlink的SVG中。

為此，我需要獲取符號的內容（innerHTML？）。 這適用於我測試過的所有瀏覽器，但移動瀏覽器除外。

下面是一個簡單的測試設置（沒有符號換行，但工作原理相同）：

HTML：

<div id="outer" style="width: 100px; height: 100px;">
    <svg id="inner" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <circle cx="10" cy="10" r="5" fill="#ffffff" />
    </svg>
</div>

Javascript：

var outerElement = document.getElementById('outer');
var innerElement = document.getElementById('inner');

outerElement.innerHTML // returns <svg id=".. etc..
innerElement.toString() // returns [object SVGSymbolElement]
innerElement.getAttribute('viewBox') // returns 0 0 100 100
innerElement.innerHTML // returns undefined (in Mobile Safari)
// Everywhere else the content <circle .. etc .. is returned.

為什么是這樣？ 還有另一種方法可以將SVG內容作為字符串獲取，而無需對exprout周圍的所有多余HTML進行正則表達式處理。

Answer 1

XMLSerializer可以序列化元素。

var string = XMLSerializer().serializeToString(innerElement);

應該為您工作。