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

Question

我正在尝试从页面上的svg创建图像。 但是，我无法让svgToImage()函数在google chrome上运行。 我将浏览器切换到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属性中有一个逗号而不是一个点。

在HTML中嵌入SVG内嵌时，您不需要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>