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

进一步的调查

我在我的服务器上创建了一个测试SVG文件 ：

1. 有一个带有正确命名空间的href属性的<image> 。
2. 使用JS使用setAttributeNS(xlinkNS,'xlink:href',…)创建新的<image>
3. 使用JS使用setAttributeNS(xlinkNS,'href',…)创建一个新的<image>
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序列化似乎存在缺陷（损坏）。

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