Base64 SVG无法在Chrome中呈现，无法在Firefox中运行

Question

我正在尝试从页面上的svg创建图像。但是，我无法svgToImage()在谷歌浏览器上使用该功能。我将浏览器切换为Firefox，所有生成的内容都没有任何问题。Firefox似乎会生成svg的不同base64表示形式，并且当该版本在google chrome中使用时，它可以工作，但该功能仍然无法创建图像。

查看一些调试日志，似乎Firefox将svg元素从<svg>变为<a0:svg>。这就是为什么这段代码在firefox中起作用的原因吗？如果是这样，是由于firefox修复而chrome忽略的名称空间不正确吗？

我已经发布了我用来测试的代码段。在chrome上，应该看到两个后盖，然后是残破的图像。在Firefox上，应该有三个黑匣子。

function svgToImage(target) {
    // Works in firefox 
    // https://gist.github.com/Caged/4649511
    var svg = document.getElementById(target);
    var xml = new XMLSerializer().serializeToString(svg);
    var data = 'data:image/svg+xml;base64,' + btoa(xml);
    var image = new Image(); 
    image.setAttribute('src', data); 
    document.body.appendChild(image);
}

//Generate another svg 
svgToImage('aSVG');

<svg width="100" height="100" id="aSVG" xmlns="http://www,w3.org/2000/svg">
 <rect id="someId" x="70" y="70" width="15" height="20" fill="#000" rx="5" ry="5" />
</svg>

<!-- generated from firefox --> 
<img src="data:image/svg+xml;base64,PGEwOnN2ZyB4bWxuczphMD0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LHczLm9yZy8yMDAwL3N2ZyIgaWQ9ImFTVkciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIj4KCQkJPGEwOnJlY3Qgcnk9IjUiIHJ4PSI1IiBmaWxsPSIjMDAwIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMTUiIHk9IjcwIiB4PSI3MCIgaWQ9InNvbWVJZCIvPgoJCTwvYTA6c3ZnPg==" ></img>

Answer 1

失败是因为xmlns属性中有逗号而不是点。

将SVG内联嵌入HTML时，不需要xmlns，因此可以将其删除。

function svgToImage(target) {
    // Works in firefox 
    // https://gist.github.com/Caged/4649511
    var svg = document.getElementById(target);
    var xml = new XMLSerializer().serializeToString(svg);
    var data = 'data:image/svg+xml;base64,' + btoa(xml);
    var image = new Image(); 
    image.setAttribute('src', data); 
    document.body.appendChild(image);
}

//Generate another svg 
svgToImage('aSVG');

<svg width="100" height="100" id="aSVG">
 <rect id="someId" x="70" y="70" width="15" height="20" fill="#000" rx="5" ry="5" />
</svg>

<!-- generated from firefox --> 
<img src="data:image/svg+xml;base64,PGEwOnN2ZyB4bWxuczphMD0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LHczLm9yZy8yMDAwL3N2ZyIgaWQ9ImFTVkciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIj4KCQkJPGEwOnJlY3Qgcnk9IjUiIHJ4PSI1IiBmaWxsPSIjMDAwIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMTUiIHk9IjcwIiB4PSI3MCIgaWQ9InNvbWVJZCIvPgoJCTwvYTA6c3ZnPg==" ></img>