问题
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>')
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.
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.
回答1:
It is not valid for data URIs to contain # characters like yours has, you must escape them as %23
Chrome 71 and later are supporting # in URIs but after 72 they don't
来源：https://stackoverflow.com/questions/54453987/did-chrome-72-break-dataimage-svgxmlutf8-for-css-background-svgs