xmlserializer 从 xlink:html svg 图像标签中去除 xlink

Question

我正在创建一个 javascript 界面以将 xlinked 图像动态添加到教室地图中。

 //declare the xlink namespace in the svg header
 xmlns:xlink="http://www.w3.org/1999/xlink"
...
//the code to append the image
var temp = document.createElementNS(svgns,"image");
temp.setAttributeNS(null,"x","0");
temp.setAttributeNS(null,"y","0");
temp.setAttributeNS(null,"height","80");
temp.setAttributeNS(null,"width","40");
temp.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","roomlayouts/items/ cactus.svg");

图像附加并显示在屏幕上，带有如下标签：

<image x="0" y="0" height="80" width="40" xlink:href="roomlayouts/items/cactus.svg"></image>

但是一旦我将它通过 xmlserializer 以便我可以保存文件，它就会从前面剥离 xlink 标记：

var svgDoc = document.getElementById('SVGMap');
var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(svgDoc.firstChild);

创作：

<image x="0" y="0" width="40" height="80" href="roomlayouts/items/cactus.svg"></image>

这意味着 svg 丢失了仙人掌。有什么想法可以让 xmlserializer 保留 xlink 前缀吗？

=============================== 注意：这是 webkit 中的一个错误，现已解决。请参阅下面的讨论以获取错误报告的链接

Answer 1

进一步调查

我创建了一个test SVG file on my server：

1. 有一个<image>，其中包含适当命名空间的href 属性。
2. 使用 JS 创建一个新的<image> 使用setAttributeNS(xlinkNS,'xlink:href',…)
3. 使用 JS 创建一个新的<image> 使用setAttributeNS(xlinkNS,'href',…)
4. 使用 JS 克隆原始（有效）<image> 元素。
5. 最后，序列化 XML 并记录结果。

WebKit 中的结果

Safari 和 Chrome 开发者工具都将 DOM 显示为：

<image xlink:href="…" />
<image xlink:href="…" />
<image href="…" />
<image xlink:href="…" />

但是，记录到控制台的 XML 序列化（如果您右键单击元素并说“复制为 HTML”，您也会得到）显示如下：

<image xlink:href="…" />
<image xlink:href="…" />
<image href="…" xmlns="http://www.w3.org/1999/xlink" />
<image xlink:href="…" />

Firefox 中的结果

Firebug 还为生成的 DOM 显示了这一点：

<image xlink:href="…" />
<image xlink:href="…" />
<image href="…" />
<image xlink:href="…" />

但是，Firebug 控制台显示了合理的（预期的）序列化：

<image xlink:href="…" />
<image xlink:href="…" />
<image xlink:href="…" />
<image xlink:href="…" />

进一步调查表明，即使您使用如下代码：

img.setAttributeNS(xlinkNS,'GLARBLE:href',…);

Firebug 将显示“GLARBLE:href”作为属性名称，但 XML 序列化使用名称空间的 URI，在根 <svg> 元素上找到匹配的名称空间并正确生成：

<image xlink:href="…" />

结论

当使用setAttributeNS 创建一个没有为属性名称提供命名空间前缀的命名空间属性时，Webkit 执行的 XML 序列化似乎存在缺陷（损坏）。

但是，如果您为属性名称提供与文档中已声明的名称空间前缀匹配的名称空间前缀，则序列化似乎可以正常工作。