Firefox不顯示data-URI SVGs

Firefox使我很難用數據URI SVGs。這裏是我的薩斯片段：Firefox不顯示data-URI SVGs

background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 73"><path fill="#{$text-color}" d="M16.1 32.848l-2.38 2.066v-13.97l-5.67-4.918-2.38 2.066V4.132l2.38-2.066L5.67 0 0 4.916v27.932l5.67 4.92V22.23l2.38-2.066v19.67l-1.19 1.032v4.148l1.19-1.033v24.58l-2.38 2.065 2.38 2.066 5.67-4.918v-28.71l2.38-2.065V52.52l-2.38 2.067 2.38 2.066v.002l5.67-4.918v-13.97l-5.67-4.92"/></svg>');

Chrome和Safari都做得很好，但Firefox不顯示它。這是錯誤從Firefox：

Unclosed token: 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 73"><path fill=" 
------------------------------------------------------------^

我發現this提到一個Firefox的錯誤，其中#斷形象。它應該是固定的，但我試圖逃避哈希無論如何。可悲的是，這並沒有幫助。

任何其他的想法有什麼可能是錯的？

來源

2015-09-19 Afterlame

啊好吧，我試圖通過反斜槓逃脫它。 '％23'did work！如果您將此作爲答案，我可以將其標記爲解決方案。謝謝！ – Afterlame

A＃是數據URI中片段標識符的開始。如果不這樣解釋，它必須編碼爲％23。

這是一個長期存在的Chrome/Safari bug，它們沒有得到片段標識符解析權。

來源

2015-09-20 07:49:03

Firefox不顯示data-URI SVGs

回答

相關問題