Почему .html() не работает с SVG-селекторами с помощью jquery?

Вопрос может кто-нибудь сказать мне, как я могу преобразовать свой SVG-элемент в строку?

Я использую canvg, чтобы преобразовать SVG в изображение.

он сначала должен быть рендерингом в холсте, метод canvg() ожидает SVG STRING

код:

  function updateChartImage(){
        canvg(document.getElementById('canvas'),expecting ` svg string`);
       var canvas = document.getElementById("canvas") ; 
       var img = canvas.toDataURL("image/png");
       img = img.replace('data:image/png;base64,', '');
       $("#hfChartImg").val(img) ;
       $('#img').attr({ src: img });
        }

Я пробовал

$('#container svg').html() ; // it gives me an error 
//Uncaught TypeError: Cannot call method 'replace' of undefined

обратите внимание, что

  $('#container svg') 
  $('#container').html() // both works fine and

UpDATE

Я использую highcharts, у меня есть функция getSVG(), которую я могу передать в canvg(), но проблема в том, что он не получает последние обновления, поэтому я должен сделать это таким образом, при запуске getSVG(), я получаю следующее: enter image description here

ССЫЛКА

Ответы

Ответ 1

Насколько я могу вспомнить jQuery .html() использует innerHTML, который предназначен для html, а не svg. SVG - это документы xml, поэтому вы можете использовать XMLSerializer()

var svg = document.getElementById('svg_root'); // or whatever you call it
var serializer = new XMLSerializer();
var str = serializer.serializeToString(svg);

Ответ 2

Для проблемы вы не получаете свой svg-контент,
Если на странице находится только одна диаграмма svg, используйте:

$('svg').html();

и если это больше, чем сейчас, посмотрите, есть ли div из highcharts_container, потому что они создают эти svg-диаграммы. Если вы их используете.
Затем используйте:

$('id of that div').html();