使用base64数据做背景图片,IE无法显示

发布时间 2023-10-10 15:10:44作者: litiyi

 

div {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20t%3D%221636092321349%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%223324%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M256%20877.714286l512%200%200-146.285714-512%200%200%20146.285714zm0-365.714286l512%200%200-219.428571-91.428571%200q-22.857143%200-38.857143-16t-16-38.857143l0-91.428571-365.714286%200%200%20365.714286zm658.285714%2036.571429q0-14.857143-10.857143-25.714286t-25.714286-10.857143-25.714286%2010.857143-10.857143%2025.714286%2010.857143%2025.714286%2025.714286%2010.857143%2025.714286-10.857143%2010.857143-25.714286zm73.142857%200l0%20237.714286q0%207.428571-5.428571%2012.857143t-12.857143%205.428571l-128%200%200%2091.428571q0%2022.857143-16%2038.857143t-38.857143%2016l-548.571429%200q-22.857143%200-38.857143-16t-16-38.857143l0-91.428571-128%200q-7.428571%200-12.857143-5.428571t-5.428571-12.857143l0-237.714286q0-45.142857%2032.285714-77.428571t77.428571-32.285714l36.571429%200%200-310.857143q0-22.857143%2016-38.857143t38.857143-16l384%200q22.857143%200%2050.285714%2011.428571t43.428571%2027.428571l86.857143%2086.857143q16%2016%2027.428571%2043.428571t11.428571%2050.285714l0%20146.285714%2036.571429%200q45.142857%200%2077.428571%2032.285714t32.285714%2077.428571z%22%20p-id%3D%223325%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}

在当前版本的Chrome,Safari(OS X和iOS)和Firefox中,这可以很好地工作。

解决:将数据类型从 data:image/svg+xml;utf8 更改为 data:image/svg+xml;charset=utf8(即charset=必填

如:background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20t%3D%221636092...