无法使用 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？）。这适用于我测试的所有浏览器，除了移动 safari。

下面是一个简单的测试设置（没有符号换行，但工作方式相同）：

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 内容作为字符串获取，而无需正则表达式删除 outerElement 周围所有不需要的 HTML。

Answer 1

XMLSerializer 可以序列化元素。

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

应该适合你。