html - 内联 SVG 不显示在移动浏览器上

Question

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-15 -15 56 80'><path d='M 16.858655,50 V 27.192245 h 7.665842 l 1.147793,-8.887827 h -8.813456 v -5.674363 c 0,-2.573533 0.716046,-4.3274238 4.41032,-4.3274238 l 4.713297,-0.0015 V 0.35099374 C 25.167627,0.24176784 22.370432,3.46934e-7 19.11473,3.46934e-7 12.319565,3.46934e-7 7.6680488,4.1432288 7.6680488,11.749759 v 6.554627 H -0.017549 v 8.887827 h 7.6854185 v 22.807754 z' fill='#f7f7f7' /></svg>");

div {
  height: 150px;
  width: 100px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-15 -15 56 80'><path d='M 16.858655,50 V 27.192245 h 7.665842 l 1.147793,-8.887827 h -8.813456 v -5.674363 c 0,-2.573533 0.716046,-4.3274238 4.41032,-4.3274238 l 4.713297,-0.0015 V 0.35099374 C 25.167627,0.24176784 22.370432,3.46934e-7 19.11473,3.46934e-7 12.319565,3.46934e-7 7.6680488,4.1432288 7.6680488,11.749759 v 6.554627 H -0.017549 v 8.887827 h 7.6854185 v 22.807754 z' fill='#f7f7f7' /></svg>");
}

<div></div>

使用上述样式，桌面浏览器(Chrome、Firefox)正确显示我的元素，但移动浏览器(Chrome、Firefox)不显示任何内容。这种差异是否存在一些已知问题，或者我在这里做错了什么？

Answer 1

添加 url 时，必须转义所有保留字符，因此字符 # 变为 %23:

fill='#f7f7f7'

到

fill='%23f7f7f7'

这种方式应该适用于所有浏览器。

在手机上查看: https://jsfiddle.net/q1g1pj13/2/

在这里，我将浅灰色更改为对比度更高的颜色(您在 jsfiddle 上几乎不可见): https://jsfiddle.net/q1g1pj13/3/