有没有办法检查一个SVG是否有有效的源代码？ （创建svg到canvas的问题）

Question

当使用图表插件生成的SVG（https://wordpress.org/plugins/visualizer/）时，我无法弄清楚如何检索正在生成的SVG图像的源。我曾尝试使用其他SVG的代码完全相同，它的工作原理类似于魅力，但Visualizer插件生成的SVG（出于某种原因）不起作用。

• onload函数未被触发。

• 控制台中未显示错误。

• 没有像在画布上创建

我怀疑是有东西在SVG无效的 - 这使得SVG不是有效的源！？我不确定，但这似乎是一个问题。请告诉我，如果我完全的“歧途”在这里..

的Javascript：

var svgText = document.getElementById("myViewer").outerHTML; 
var myCanvas = document.getElementById("canvas"); 
var ctxt = myCanvas.getContext("2d"); 

function drawInlineSVG(ctx, rawSVG, callback) {  
    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}), 
     domURL = self.URL || self.webkitURL || self, 
     url = domURL.createObjectURL(svg), 
     img = new Image; 

    img.onload = function() { 
     //Does not come here... 
     ctx.drawImage(this, 0, 0);  
     domURL.revokeObjectURL(url); 
     callback(this); 
    }; 
    img.src = url; 
} 
// usage: 
drawInlineSVG(ctxt, svgText, function() { 
    console.log(canvas.toDataURL()); // -> PNG 
    alert("see console for output..."); 
}); 

Answer 1

出于某种原因，下面的代码被触发，即使最后的结果不是我期望它是...

img.onload = savepng(); 
function savepng() { 
    // ...code... 
} 

但是下面没有触发...

img.onload = function() { 
    // ...code... 
} 

的问题是，需要将SVG声明为XML文档。奇怪的是，没有错误发生，因为这个

我添加了一些行到我的代码，现在它的工作。

var svgBase = document.getElementById("myViewer"); 

//This attribute is needed for the image creation to work 
svgBase.setAttribute("xmlns", "http://www.w3.org/2000/svg"); 

//this attribute is not needed for the imagecreation to work, 
//but I guess it doesn't hurt to add this...   
svgBase.setAttribute("xmlns:svg", "http://www.w3.org/2000/svg"); 

//Get the outer html now when xml is declared 
var svgText = svgBase.outerHTML; 

UPDATE 基于对（从@Kaiido）的意见建议，下面我已经改变了我的代码：

var svgBase = document.getElementById("myViewer"); 
var svgURL = new XMLSerializer().serializeToString(svgBase);    
var myCanvas = document.getElementById("mycanvas"); 
var ctxt  = myCanvas.getContext("2d"); 
var img = new Image(); 
img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgURL); 

//Wait for image to be being loaded 
img.onload = function() { 
    ctxt.drawImage(img,0,0);         
    var dataPNG = myCanvas.toDataURL('image/png'); 
    console.log(dataPNG); 
}