javascript - .getPropertyValue() 检索到的 SVG 数据 URI 的浏览器输出不同，怎么办？

Question

原始 CSS:

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='scale' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect x='0' y='0' width='25' height='25' class='color2 size1' fill='%23666'/%3E%3C/svg%3E");

JavaScript:

var el = document.getElementById('MyID').getElementsByTagName("A")[0];  
var BG_IMAGE = window.getComputedStyle( el, null).getPropertyValue('background-image');
alert(BG_IMAGE);

JS 导致以下各种浏览器输出(如下)，我希望始终如一地拥有 Chrome 的输出。我使用“优化的 URL 编码”方法来自:https://codepen.io/tigt/post/optimizing-svgs-in-data-uris它编码... <、>、#、任何剩余的 "(如文本内容)、非 ASCII 字符和其他 URL 不安全字符，如 %。这会留下单引号和空格。

问题:如何在现代浏览器 [IE11、Edge、FF、Opera、Chrome、Safari] 之间安全地获得一致输出的 CSS 背景图像？

Chrome/Opera(理想输出):

url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='scale' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect x='0' y='0' width='25' height='25' class='color2 size1' fill='%23666'/%3E%3C/svg%3E")

FF(用 %20 替换空格并在 ' 之前添加\):

url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20class=\'scale\'%20width=\'100\'%20height=\'100\'%20viewBox=\'0%200%20100%20100\'%3E%3Crect%20x=\'0\'%20y=\'0\'%20width=\'25\'%20height=\'25\'%20class=\'color2%20size1\'%20fill=\'%23666\'/%3E%3C/svg%3E")

边缘(在 ' 之前添加\):

url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' class=\'scale\' width=\'100\' height=\'100\' viewBox=\'0 0 100 100\'%3E%3Crect x=\'0\' y=\'0\' width=\'25\' height=\'25\' class=\'color2 size1\' fill=\'%23666\'/%3E%3C/svg%3E')

Answer 1

通过使用decodeURI()发送svg字符串(url('data:image/svg+xml,之后的部分))在Chrome和Edge上是一致的。你可以在 Firefox 上试试，因为我这里没有。