Question

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

查看一些调试日志，似乎firefox将svg元素从<svg>转换为<a0:svg>。这是为什么这段代码在firefox中工作的原因？如果是这样，是因为firefox修复了错误的命名空间而chrome忽略了吗？

我已经发布了我用来测试的代码片段。在chrome上，应该看到两个背框，然后是一个损坏的图像。在Firefox上，应该有三个黑盒子。

＆＃13;

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');

＆＃13;

<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>

＆＃13;

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>

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

1 个答案: