css用svg做背景图的几种方式和svg不显示的解决办法

1. 直接使用

background: url('data:image/svg+xml;charset=utf-8,<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><g> <rect stroke="#000" transform="rotate(44.7 5,5)" height="6" width="6" y="2" x="2" stroke-width="0" fill="#f00"/></g></svg>') no-repeat 50% 50% / 100% 100%;

2. 转为base64后使用

background-image: url('data:image/svg+xml;base64,PCEtLSDlm77moIfvvJrmlofku7YgLS0+DQo8IS0tIDxz...');

3. 外置引用

background-image: url(test.svg);

有时候我们只做好的svg图片查看的时候可以显示用到背景图上就无法显示

这时候可以查看svg代码是否有xmlns属性没有的记得补上

<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="宽" height="高">