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

进一步的调查

\n\n

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

\n\n

\n
1. 其中有一个<image>具有正确命名空间的属性。href
\n
2. 使用JS创建一个新的<image>usingsetAttributeNS(xlinkNS,\'xlink:href\',\xe2\x80\xa6)
\n
3. 使用JS创建一个新的<image>usingsetAttributeNS(xlinkNS,\'href\',\xe2\x80\xa6)
\n
4. 使用 JS 克隆原始（有效）<image>元素。
\n
5. 最后，序列化 XML 并记录结果。
\n

\n\n

WebKit 中的结果

\n\n

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

\n\n

<image xlink:href="\xe2\x80\xa6" />\n<image xlink:href="\xe2\x80\xa6" />\n<image href="\xe2\x80\xa6" />\n<image xlink:href="\xe2\x80\xa6" />\n

\n\n

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

\n\n

<image xlink:href="\xe2\x80\xa6" />\n<image xlink:href="\xe2\x80\xa6" />\n<image href="\xe2\x80\xa6" xmlns="http://www.w3.org/1999/xlink" />\n<image xlink:href="\xe2\x80\xa6" />\n

\n\n

火狐浏览器中的结果

\n\n

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

\n\n

<image xlink:href="\xe2\x80\xa6" />\n<image xlink:href="\xe2\x80\xa6" />\n<image href="\xe2\x80\xa6" />\n<image xlink:href="\xe2\x80\xa6" />\n

\n\n

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

\n\n

<image xlink:href="\xe2\x80\xa6" />\n<image xlink:href="\xe2\x80\xa6" />\n<image xlink:href="\xe2\x80\xa6" />\n<image xlink:href="\xe2\x80\xa6" />\n

\n\n

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

\n\n

img.setAttributeNS(xlinkNS,\'GLARBLE:href\',\xe2\x80\xa6);\n

\n\n

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

\n\n

<image xlink:href="\xe2\x80\xa6" />\n

\n\n

结论

\n\n

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

\n\n

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

\n