javascript - xmlserializer 从 xlink :html svg image tag 剥离 xlink

Question

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

 //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 序列化似乎有缺陷(损坏)创建一个没有为属性名称提供命名空间前缀的命名空间属性。

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