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>