svg to png не работает, подозрительные svg отличия элементов

Question

У меня возникли проблемы с выяснением того, почему два разных svg заставляют мой javascript работать в одном экземпляре, но не в другом. Я только поменял элементы svg в обоих примерах, один работает, а другой нет. Вот код в двух jsFiddles. Рабочий пример я получил от here.

В конечном счете, моя цель - сохранить текущий элемент svg плана этажа и вставить преобразованный png как встроенный img в область с расширенным текстом. Как будто вы сняли снимок экрана плана пола и вложили его в область с богатым текстом, как вы видите на сайтах службы поддержки. У меня просто проблемы с преобразованием в png.

Рабочая: JsFiddle

не работает: JsFiddle

Вот это JS, я не могу добавить код SVG или это поставит меня предел символьного Stackoverflow.

var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2')); 

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var DOMURL = self.URL || self.webkitURL || self; 
var img = new Image(); 
var svg = new Blob([svgString], { 
    type: "image/svg+xml;charset=utf-8" 
}); 
var url = DOMURL.createObjectURL(svg); 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    var png = canvas.toDataURL("image/png"); 
    document.querySelector('#png-container').innerHTML = '<img src="' + png + '"/>'; 
    DOMURL.revokeObjectURL(png); 
}; 
img.src = url; 

Edit:

С тех пор я остановился на этом коде опуская преобразования PNG/холст, и пытается поместить последовательную строку в формате SVG, непосредственно богатому текстовой области, но он получает сообщение об ошибке в IE, декларации пространства имен, отличные от по умолчанию, не должны иметь пустой URI. Линия: 1, column142

var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2')); 

var img = new Image(); 

var url = "data:image/svg+xml; charset=utf8, "+encodeURIComponent(svgString); 
img.onload = function() { 

    document.querySelector('.ze_body').innerHTML = '<img src="'+url+'"/>'; 

}; 
img.src = url; 

Также я думаю, что это поможет, если я показал более структуру, как в настоящее время находится эта богатая текстовая области. Это не наше дело, его продукт, который мы используем, и я просто пытаюсь получить карты для вставки в область описания, чтобы он мог жить с билетом. Только доступ у нас есть js, вызванный правилами в форме. Screenshot of ze_body element as it stands in the DOM

Answer 1

Он исходит из вашего объявления пространства имен:

Изменитьxmlns:NS1="" NS1:xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:NS2="" NS2:xmlns:cc="http://creativecommons.org/ns#" xmlns:NS3="" NS3:xmlns:dc="http://purl.org/dc/elements/1.1/"

кxmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> и should work.

отметить также, что, поскольку вы используете XMLSerializer().serializeToString(), вам не нужно, чтобы создать blob и objectURL, можно передавать только data:image/svg+xml; charset=utf8, " и encodeURIComponent(svgString) как адрес вашего изображения. (fiddle).

ps: Вы можете прочитать про декларацию пространства имен here.