1

我有一个带有 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 来发布数据：

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>

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

4

1 回答 1

0

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

首先，抓住你的 SVG 元素：

svg = document.querySelector("svg");

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

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 应该不再产生奇怪的输出。

于 2015-02-19T17:38:28.283 回答