XMLSerializer испортите ссылки

Question

У меня есть объект СВГ с DEFS:

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> 

Что я делаю неправильно? Thanks Rolf

Answer 1

Это не ошибка в 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 больше не производят странный выход.