Question

我有一个带defs的svg对象：

defs.append('svg:pattern')
    .attr('id', 'blue')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', '40')
    .attr('height', '39')
    .append('svg:image')
    .attr('xlink:href', 'images/blue.png')
    .attr('width', '40')
    .attr('height', '39');

在我的代码中，我使用XMLSerializer来POST数据：

var svg1 = tmp.getElementsByTagName("svg");
    var svg_xml = (new XMLSerializer).serializeToString(svg1[0]);

在Safari中，我得到了理想的结果：

<svg width="850" height="200">
  <pattern id="blue" patternUnits="userSpaceOnUse" width="40" height="39">
    <image xlink:href="images/blue.png" width="40" height="39"></image>
  </pattern>

在Firefox或IE中我得到了奇怪的结果：

<svg xmlns="http://www.w3.org/2000/svg" width="850" height="200">
<defs>
  <pattern id="blue" patternUnits="userSpaceOnUse" width="40" height="39">
    <image a0:href="images/plateColor/blue.png" xmlns:a0="http://www.w3.org/1999/xlink" width="40" height="39"/>
  </pattern>

我做错了什么？谢谢罗尔夫

Answer 1

这不是D3.js中的错误。以下是如何解决任何SVG的问题：

首先，抓住你的SVG元素：

svg = document.querySelector("svg");

现在，SVG元素可以在不同的命名空间中具有多个这些属性，因此我们必须先删除它们以防止重复的属性。否则，在通过XMLSerializer序列化为字符串后，SVG不再有效：

svg.removeAttribute("xmlns");
svg.removeAttribute("xmlns:xlink");

最后，添加相同的属性，但使用正确的命名空间：

prefix = "http://www.w3.org/2000/xmlns/";
if (!svg.hasAttributeNS(prefix, "xmlns")) {
    svg.setAttributeNS(prefix, "xmlns", "http://www.w3.org/2000/svg");
}

if (!svg.hasAttributeNS(prefix, "xmlns:xlink")) {
    svg.setAttributeNS(prefix, "xmlns:xlink", "http://www.w3.org/1999/xlink");
}

现在XMLSerializer不再产生奇怪的输出。

XMLSerializer搞乱了链接

1 个答案: