的XMLSerializer搞乱链接

我有DEFS一个SVG对象：的XMLSerializer搞乱链接

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>

我在做什么错？谢谢 Rolf

来源

2013-07-19 Rolf

Safari浏览器的结果看起来无效，它应该定义xlink前缀。 –

在此处找到解决方案： https://groups.google.com/forum/#!topic/d3-js/NCm0rvr4Dyg 这是d3js中的一个错误 – Rolf

这不是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-19 17:38:28 Ashitaka

的XMLSerializer搞乱链接

回答

相关问题