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

Question

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

• 未触发onload-function。

• 控制台中未显示任何错误。

• 在画布中没有创建图像

我怀疑该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;

<强>更新 根据以下评论中的建议（来自@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);
}