我正在尝试从页面上的 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>
最佳答案
它失败了,因为你的 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>
关于javascript - Base64 SVG 无法在 Chrome 中呈现,在 Firefox 中有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33025085/