javascript - Base64 SVG 无法在 Chrome 中呈现，在 Firefox 中有效

Question

我正在尝试从页面上的 svg 创建图像。但是，我无法获得 svgToImage()在谷歌浏览器上工作的功能。我将浏览器切换到 firefox，并且生成的所有内容都没有任何问题。 Firefox 似乎生成了不同的 base64 表示形式的 svg，当这个版本在 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>