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：

其中包含<image>具有正确命名空间的href属性。
使用JS使用<image>

setAttributeNS(xlinkNS,'xlink:href',…)

使用JS使用<image>

setAttributeNS(xlinkNS,'href',…)

使用JS克隆原始（有效）<image>元素。
最后，序列化XML并记录结果。

WebKit中的结果

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

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

但是，XML序列化记录到控制台（如果右键单击Element并说“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序列化似乎存在缺陷（损坏）。

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

xmlserializer从xlink：html svg图像标记中剥离xlink

1 个答案:

进一步调查

WebKit中的结果

Firefox中的结果

结论