無法在Firefox中繪製SVG到HTMl5畫布（即使設置了高度和寬度）

作爲我的項目的一部分，我需要動態創建畫布，然後在畫布中繪製SVG文件（也是動態生成的）。對於我的項目，我需要畫布覆蓋整個頁面，並使用SVG填充整個畫布。爲了提高瀏覽器的可比性，我將SVG的寬度和高度分別設置爲畫布的寬度和高度（按照這個答案https://stackoverflow.com/a/28692538來處理這個已知的Firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=700533），但是Firefox的畫布仍然是空白的（在Chrome，Safari ，和歌劇）。我想知道任何人都可以解釋這個問題。無法在Firefox中繪製SVG到HTMl5畫布（即使設置了高度和寬度）

我做了一個演示（不是我真正的SVG文件，但方法和問題相同）的小提琴。只是爲了顯示問題不是SVG，如果您將其複製出警報並粘貼到新的Firefox選項卡中，它將呈現得很好。我的Firefox版本是47.0 這應該是最重要的代碼的一部分。

img.onload = function() { 
    ctx.scale(ratio, ratio); 
    ctx.drawImage(img, 0, 0); 
} 

svg = "data:image/svg+xml,"+ "<svg xmlns='http://www.w3.org/2000/svg' width='"+canvas.width+"px' height='"+canvas.height+"px' viewBox='0,0,"+canvas.width+","+canvas.height+"' >" + 
     "<style type='text/css'> * { margin: 0; padding: 0; } p{background-color:blue;}</style>"+ 
        '<rect x="10" y="10" width="100" height="100"/>' + 
       "</svg>" 
img.src = svg

問題的全部小提琴演示：https://jsfiddle.net/9are9tzx/5/ 謝謝！

來源

2016-06-09 zevnicsca

你的演示在FF中對我很好。我看到一個黑色的矩形。

您在示例中是否無意中使用了SVG？

如果其他一些SVG不起作用，可能是因爲在Firefox中使用SVG DataURI時出現的常見問題：哈希/磅符號（＃）。

技術上'＃'是URL中的保留字符。它標記了一個片段標識符。它出現在SVG中作爲一個片段標識符（例如url(#mygradient)和顏色（#ffcc88）。

如果DataURI中存在'＃'，但Chrome瀏覽器不支持Chrome瀏覽器和其他瀏覽器。而不是Firefox中的錯誤，它的行爲是正確的

解決方法是通過使用百分比編碼來轉義SVG中任何'＃' - 對於'＃'編碼是%23。

來源

2016-06-09 02:20:32

既然你說我的演示爲你工作，我再次檢查。這是我發現的。演示不工作在Firefox 47.0（這是我測試演示和我的項目），但演示在Firefox 46.0.1上運行得很好（我降級測試）。你用什麼版本？儘管如此，感謝您關於＃的建議，但在發佈我的項目之前，我會毫不猶豫地編寫一個data：URI消毒劑。 – zevnicsca

我只是重新更新Firefox並重新啓動我的電腦，現在它適用於我（演示和我的項目）。在它出來後我確實得到了FF 47.0，所以也許我的版本不穩定，或者我的第一個更新是壞的或者什麼的。對於那個很抱歉！ – zevnicsca

@zevnicsca，不需要自己編寫，'encodeURIComponent（）'已經在你的'window'對象中。另外，一些UA需要編碼頭，因此唯一完整的跨瀏覽器的dataURI頭是'data：image/svg + xml; charset = utf8，'' – Kaiido

無法在Firefox中繪製SVG到HTMl5畫布（即使設置了高度和寬度）

回答

相關問題