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失去了cactii。你知道如何让xmlserializer保留xlink前缀吗？

==============================注意:这是webkit中的一个错误，现在已经解决了。有关错误报告的链接，请参阅下面的讨论

Answer 1

进一步调查

我已经创建了一个test SVG file on my server，它：

1. 中有一个具有正确命名空间的<image>属性。
2. 使用JS创建新的<image>，使用setAttributeNS(xlinkNS,'xlink:href',…)
3. Uses JS创建新的<image>，并使用setAttributeNS(xlinkNS,'href',…)
4. Uses JS克隆原始(有效)的<image>。序列化<image>并记录结果。<代码>H218<代码>G219

WebKit格式的结果

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

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

但是，记录到控制台的XML序列化(如果您右键单击元素并说"Copy as 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序列化似乎有缺陷(损坏)。

但是，如果为属性名称提供的命名空间前缀与文档中已声明的命名空间前缀匹配，则序列化看起来工作正常。