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的输出。我使用了来自https://codepen.io/tigt/post/optimizing-svgs-in-data-uris的“优化网址编码”方法，它编码...＆lt;，＆gt;，＃，任何剩余的“（如文本内容），非ASCII字符和其他网址不安全字符，如％。这会留下单引号和空格。

问题：如何在现代浏览器[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")

Edge（在'之前添加\）：

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上试用它，因为我没有在这里使用它。

SVG数据URI的浏览器输出在.getPropertyValue（）检索时有所不同，该怎么办？

1 个答案: