为什么在使用jQuery时，.html()不能与SVG选择器一起使用？

Question

问题：有人能告诉我如何将我的SVG元素转换为字符串吗？

我正在使用canvg将我的SVG转换为图像。

必须先在画布上渲染，canvg()方法需要一个SVG字符串

代码：

  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

更新

我正在使用Highcharts，它有一个getSVG()函数，可以传递给canvg()，但问题是它不能得到最新的更新，所以我必须这样做。当运行getSVG()函数时，我会得到以下内容：

链接

- Mina Gabriel

---

从他们的文档中可以看到，"canvg是一个SVG解析器和渲染器。" 如果你已经有了SVG，无论是作为字符串还是URL引用，你都可以将其加载到画布中，然后使用你描述的画布方法来提取图像。但你需要先有SVG。这就是该库的作用。 - Scott Sauyet

我想我应该提到我正在使用 Highcharts，请查看我的更新。 - Mina Gabriel

或许等待DOM准备好了再执行？document.ready() - Ron van der Heijden

“getSVG() ... doesn't get the latest updates” 是什么意思？我一直在使用它而没有任何问题。 - freakish

我不得不使用jQuery更改一些transform()，但当我使用getSVG()将图表转换为PDF时，它不会将我的更改附加到svg上，而且我所做的无法使用highcharts.rendrer()解决。 - Mina Gabriel

Answer 1

据我所知，jQuery的 .html() 方法使用的是针对HTML而非SVG的innerHTML。因为SVG是XML文档，所以你可以使用 XMLSerializer() 方法。

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

- methodofaction

---

你能在以下的jsFiddle上演示一下如何做吗？我尝试了但是没有成功...谢谢 Duopixel - Mina Gabriel

或者您可以使用 var svg = $("#container svg")[0]; 从选择器中获取DOM元素而不是ID。 - Rup

@Duopixel中的[0]是否指选择器内的DOM元素？这是什么调用？ - Mina Gabriel

是的，jQuery选择器允许您访问所选的DOM元素，就像它是一个数组一样 - 它有一个.length属性，您可以使用数组索引来读取它们。很抱歉我找不到数组语法的参考，但您也可以使用.get(0)代替[0]。 - Rup

Answer 2

针对您无法获取SVG内容的问题，
如果页面上只有一个SVG图表，请使用以下代码：

$('svg').html();

如果超过现有数量，请查看是否有一个名为highcharts_container的div，因为它们会创建SVG图表。如果您正在使用它们，
请使用以下内容：

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

- Guest