css - Chrome 72 是否破坏了 css 背景 svgs 的 'data:image/svg+xml;utf8'?

标签 css xml google-chrome svg background-image

<分区>

我的 svgs 在 css 中指定如下:

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="15" viewBox="0 0 18 15"><g fill="none" fill-rule="evenodd" stroke="#00174a"><path d="M11 1l7 6.533L11.07 14M17.5 7.5H.5"/></g></svg>')

这适用于所有浏览器,但自 chrome 72 起,此功能不再适用于 chrome。我在 background 属性中找不到任何关于 data:image 前缀的可靠文档。或来自谷歌的有关此更改的更新。

我知道我可以指定一个 svg 的路径,但我正在使用这种技术来重现具有不同颜色的 svg,这是我需要实现的方法。

最佳答案

数据 URI 包含 # 个字符是无效的,您必须将它们转义为 %23。

Chrome 71 及更早版本在 URI 中支持#,但在 72 之后不支持。

关于css - Chrome 72 是否破坏了 css 背景 svgs 的 'data:image/svg+xml;utf8'?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54453987/

相关文章:

javascript - 在 Chrome 扩展中实现 Pusher

javascript - 对于 Chrome 上动态加载的 iframe,contentWindow 未定义

java - 如何使用扩展和 Selenium 打开新选项卡?

html - 为什么这会发生在我的悬停元素上?

java - App恢复时Android EditText有时会丢失输入

xml - 将(可能格式错误的)xml 转换为 R 中的数据帧

xml - Scala 解析器组合器解析 xml?

html - Bootstrap NavBar 折叠在点击时不起作用

javascript - 使用 JavaScript 全局覆盖鼠标光标

twitter-bootstrap - Twitter Bootstrap 响应式布局在 IE8 或更低版本中不起作用