Javascript 当通过.getPropertyValue（）检索SVG数据URI时，浏览器输出会有所不同，该怎么办？

原始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编码”方法来自：哪个编码…，#，任何剩余的字符（如文本内容）、非ASCII字符和其他URL不安全字符，如%。这会留下单引号和空格

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

Chrome/Opera（理想输出）：

FF（将空格替换为%20并在其前面添加\项）：

边缘（添加\在“）：

---

---

通过使用

decodeURI（）

发送svg字符串（在

url之后的部分（'data:image/svg+xml，

），它在Chrome和Edge上是一致的。您可以在Firefox上尝试，因为我这里没有它。

通过使用

decodeURI（）

发送svg字符串（在

url之后的部分（'data:image/svg+xml，

）它在Chrome和Edge上是一致的。您可以在Firefox上试用，因为我这里没有。

如果问题不明显，我可以更新我的问题，但我正在使用JavaScript从CSS检索背景图像。此时浏览器输出会有所不同。通过

decodeURI（）运行此输出字符串

，虽然有助于使用

%20

，但它不会删除单引号前的反斜杠。我是JS新手，因此如果我没有按照建议应用您的答案，您能否更具体地说明在哪里使用

decodeURI（）

。这是因为输出以单引号形式出现。因此，为了避免javascript丢失，引号转义前的反斜杠可能会自动消失，具体取决于您使用字符串的位置。如果没有，则可以使用

.replace（/\'/g，“'））

所以它们变成了双引号，因为它仍然是有效的svg。不幸的是，根据描述“在数据URI中优化svg”的文章（在我的回答中链接）所述，数据URI需要使用单引号才能在现代浏览器上工作，因为URL中只允许使用单引号。我认为使用

.replace（/\\\'/g，“'））

可能就是你想要的。如果你只是在页面中再次使用它们，没有什么好担心的，因为你不会将它发送到任何服务器或任何东西。是的，我用谷歌搜索了一下，似乎我们只需要做这些替换，直到浏览器表现一致为止（永远不会）。如果问题不明显，我可以更新我的问题，但我正在使用JavaScript从CSS检索背景图像。此时，浏览器输出会发生变化。通过

decodeURI（）运行此输出字符串

，虽然有助于使用

%20

，但它不会删除单引号前的反斜杠。我是JS新手，因此如果我没有按照建议应用您的答案，您能否更具体地说明在哪里使用

decodeURI（）

。这是因为输出以单引号形式出现。因此，为了避免javascript丢失，引号转义前的反斜杠可能会自动消失，具体取决于您使用字符串的位置。如果没有，则可以使用

.replace（/\'/g，“'））

所以它们变成了双引号，因为它仍然是有效的svg。不幸的是，根据描述“在数据URI中优化svg”的文章（在我的回答中链接）所述，数据URI需要使用单引号才能在现代浏览器上工作，因为URL中只允许使用单引号。我认为使用

.replace（/\\\'/g，“'））

可能就是你想要的。如果你只是在页面中再次使用它们，没有什么好担心的，因为你不会将它发送到任何服务器或任何东西。是的，我用谷歌搜索了一下，似乎我们只需要做这些替换，直到浏览器表现一致为止（永远不会）。为什么它们在每个浏览器上都必须相同？我正在创建一个SVG背景编辑器。我正在检索和处理数据URI，然后输出优化的<代码>背景图像<代码>CSS。这并不能回答我的问题，除非它生成的内容在某些浏览器上不起作用。是吗？如果数据URL不相同，它就不是optimized。更具体地说，IE/FF在每个引号前添加一个字符，FF在数据URI的每个空格中添加两个字符。为什么每个浏览器上的字符都必须相同？我正在创建一个SVG背景编辑器。我正在检索和操作数据URI，然后输出优化的

背景图像
CSS。这并不重要不要回答我的问题，除非它生成的内容在某些浏览器上不起作用。是吗？如果数据URL不相同，则不会进行优化。更具体地说，IE/FF在每个引号前添加一个字符，FF为数据URI中的每个空格添加两个字符。
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")

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')