Chrome 72是否破坏了CSS背景SVG的"data:image/svg + xml; utf8"? [英] Did Chrome 72 break 'data:image/svg+xml;utf8' for css background svgs?

问题描述

我的svg在CSS中是这样指定的:

My svgs are specified in css like this:

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前缀的任何可靠文档.或Google关于此更改的更新.

This works in all browsers but since chrome 72 this feature no longer works in chrome. I can't find any solid docs about data:image prefix in a background property. Or an update from google about this change.

我知道我可以指定svg的路径，但是我正在使用这种技术来复制具有不同颜色的svg，这是我需要实现的方法.

I recognize that I could specify a path to an svg but I'm using this technique to reproduce svgs with different colors and this is the method i need to accomplish that.

推荐答案

数据URI不能像您一样包含#个字符，因此必须将其转为％23.

It is not valid for data URIs to contain # characters like yours has, you must escape them as %23.

Chrome 71和更早的版本在URI中支持#，但在72之后不支持.

Chrome 71 and earlier version are supporting # in URIs but not after 72 they don't.

这篇关于Chrome 72是否破坏了CSS背景SVG的"data:image/svg + xml; utf8"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！