时间戳

首页 > 解决方案 > SVG 标签不适用于 CSS 的背景图片

css - SVG 标签不适用于 CSS 的背景图片

问题描述

我想SVG在 css background-image 属性中使用标签。它适用于 Chrome、Firefox、Edge，但不适用于 IE-10,11 Codepen链接：-

代码：-

body {
  background-image: url('data:image/svg+xml;utf8,<svg fill="red" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
  background-repeat: no-repeat;
  padding: 2rem;
}
<h1>The background-image Property</h1>

标签： csssvgbackground-image

解决方案

您需要删除;utf8和 URL 编码您的 SVG，如下所述：Inline SVG background not working in Internet Explorer 11

body {
  background-image: url('data:image/svg+xml,%3Csvg%20fill%3D%22red%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  padding: 2rem;
}

推荐阅读