的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搞亂鏈接

回答

相關問題