html - 以 SVG 作为数据 URL 的 CSS 背景在 Chrome 中不起作用

Question

我已经在 Firefox 上尝试了以下 HTML。 .case-1 和 .case-2 都有效。但是在 Chrome 中，这两个背景图片都不可见:

.case-1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20style%3D%22fill%3A%23000%3B%22%20height%3D%22%22%20width%3D%22%22%3E%20%3Cpath%20d%3D%22M17.316%206.246c.008.162.01.326.01.488%200%204.99-3.796%2010.742-10.74%2010.742-2.132%200-4.115-.625-5.786-1.697.296.033.596.05.9.05%201.77%200%203.397-.603%204.688-1.614-1.65-.03-3.046-1.12-3.526-2.62.23.042.467.065.71.065.345%200%20.68-.044.995-.13C2.84%2011.18%201.54%209.658%201.54%207.828V7.78c.508.284%201.09.454%201.71.474-1.014-.678-1.68-1.832-1.68-3.143%200-.69.185-1.34.51-1.896C3.943%205.498%206.726%207%209.863%207.158c-.064-.277-.097-.564-.097-.86%200-2.085%201.69-3.774%203.774-3.774%201.085%200%202.066.457%202.755%201.19.86-.17%201.667-.483%202.397-.915-.282.88-.88%201.62-1.66%202.086.764-.092%201.49-.293%202.168-.594-.506.758-1.146%201.422-1.884%201.953z%22%2F%3E%3C%2Fsvg%3E);
}

.case-2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImZpbGw6IzAwMDsiIGhlaWdodD0iIiB3aWR0aD0iIj4gPHBhdGggZD0iTTE3LjMxNiA2LjI0NmMuMDA4LjE2Mi4wMS4zMjYuMDEuNDg4IDAgNC45OS0zLjc5NiAxMC43NDItMTAuNzQgMTAuNzQyLTIuMTMyIDAtNC4xMTUtLjYyNS01Ljc4Ni0xLjY5Ny4yOTYuMDMzLjU5Ni4wNS45LjA1IDEuNzcgMCAzLjM5Ny0uNjAzIDQuNjg4LTEuNjE0LTEuNjUtLjAzLTMuMDQ2LTEuMTItMy41MjYtMi42Mi4yMy4wNDIuNDY3LjA2NS43MS4wNjUuMzQ1IDAgLjY4LS4wNDQuOTk1LS4xM0MyLjg0IDExLjE4IDEuNTQgOS42NTggMS41NCA3LjgyOFY3Ljc4Yy41MDguMjg0IDEuMDkuNDU0IDEuNzEuNDc0LTEuMDE0LS42NzgtMS42OC0xLjgzMi0xLjY4LTMuMTQzIDAtLjY5LjE4NS0xLjM0LjUxLTEuODk2QzMuOTQzIDUuNDk4IDYuNzI2IDcgOS44NjMgNy4xNThjLS4wNjQtLjI3Ny0uMDk3LS41NjQtLjA5Ny0uODYgMC0yLjA4NSAxLjY5LTMuNzc0IDMuNzc0LTMuNzc0IDEuMDg1IDAgMi4wNjYuNDU3IDIuNzU1IDEuMTkuODYtLjE3IDEuNjY3LS40ODMgMi4zOTctLjkxNS0uMjgyLjg4LS44OCAxLjYyLTEuNjYgMi4wODYuNzY0LS4wOTIgMS40OS0uMjkzIDIuMTY4LS41OTQtLjUwNi43NTgtMS4xNDYgMS40MjItMS44ODQgMS45NTN6Ii8+PC9zdmc+);
}

<div class="case-1"></div>
<div class="case-2"></div>

仅供引用，背景图像是带有此 SVG 源代码的 Twitter Logo :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill:#000;" height="" width="">
    <path d="M17.316 6.246c.008.162.01.326.01.488 0 4.99-3.796 10.742-10.74 10.742-2.132 0-4.115-.625-5.786-1.697.296.033.596.05.9.05 1.77 0 3.397-.603 4.688-1.614-1.65-.03-3.046-1.12-3.526-2.62.23.042.467.065.71.065.345 0 .68-.044.995-.13C2.84 11.18 1.54 9.658 1.54 7.828V7.78c.508.284 1.09.454 1.71.474-1.014-.678-1.68-1.832-1.68-3.143 0-.69.185-1.34.51-1.896C3.943 5.498 6.726 7 9.863 7.158c-.064-.277-.097-.564-.097-.86 0-2.085 1.69-3.774 3.774-3.774 1.085 0 2.066.457 2.755 1.19.86-.17 1.667-.483 2.397-.915-.282.88-.88 1.62-1.66 2.086.764-.092 1.49-.293 2.168-.594-.506.758-1.146 1.422-1.884 1.953z"/>
</svg>

我已经根据 w3c validator 检查了这个及其有效。

有什么建议吗？

Answer 1

“”的宽度和“”的高度实际上是无效的。 w3c 验证器 doesn't validate attribute values ，只是元素和属性名称。

Firefox 将 100% 替换为无效值，Chrome 也应该这样做，但显然做了其他事情。你可以 report that as a bug .

我已经更正了下面的缺失值。

.case-1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20style%3D%22fill%3A%23000%3B%22%20height%3D%22100%%22%20width%3D%22100%%22%3E%20%3Cpath%20d%3D%22M17.316%206.246c.008.162.01.326.01.488%200%204.99-3.796%2010.742-10.74%2010.742-2.132%200-4.115-.625-5.786-1.697.296.033.596.05.9.05%201.77%200%203.397-.603%204.688-1.614-1.65-.03-3.046-1.12-3.526-2.62.23.042.467.065.71.065.345%200%20.68-.044.995-.13C2.84%2011.18%201.54%209.658%201.54%207.828V7.78c.508.284%201.09.454%201.71.474-1.014-.678-1.68-1.832-1.68-3.143%200-.69.185-1.34.51-1.896C3.943%205.498%206.726%207%209.863%207.158c-.064-.277-.097-.564-.097-.86%200-2.085%201.69-3.774%203.774-3.774%201.085%200%202.066.457%202.755%201.19.86-.17%201.667-.483%202.397-.915-.282.88-.88%201.62-1.66%202.086.764-.092%201.49-.293%202.168-.594-.506.758-1.146%201.422-1.884%201.953z%22%2F%3E%3C%2Fsvg%3E);
}

.case-2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImZpbGw6IzAwMDsiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiPiA8cGF0aCBkPSJNMTcuMzE2IDYuMjQ2Yy4wMDguMTYyLjAxLjMyNi4wMS40ODggMCA0Ljk5LTMuNzk2IDEwLjc0Mi0xMC43NCAxMC43NDItMi4xMzIgMC00LjExNS0uNjI1LTUuNzg2LTEuNjk3LjI5Ni4wMzMuNTk2LjA1LjkuMDUgMS43NyAwIDMuMzk3LS42MDMgNC42ODgtMS42MTQtMS42NS0uMDMtMy4wNDYtMS4xMi0zLjUyNi0yLjYyLjIzLjA0Mi40NjcuMDY1LjcxLjA2NS4zNDUgMCAuNjgtLjA0NC45OTUtLjEzQzIuODQgMTEuMTggMS41NCA5LjY1OCAxLjU0IDcuODI4VjcuNzhjLjUwOC4yODQgMS4wOS40NTQgMS43MS40NzQtMS4wMTQtLjY3OC0xLjY4LTEuODMyLTEuNjgtMy4xNDMgMC0uNjkuMTg1LTEuMzQuNTEtMS44OTZDMy45NDMgNS40OTggNi43MjYgNyA5Ljg2MyA3LjE1OGMtLjA2NC0uMjc3LS4wOTctLjU2NC0uMDk3LS44NiAwLTIuMDg1IDEuNjktMy43NzQgMy43NzQtMy43NzQgMS4wODUgMCAyLjA2Ni40NTcgMi43NTUgMS4xOS44Ni0uMTcgMS42NjctLjQ4MyAyLjM5Ny0uOTE1LS4yODIuODgtLjg4IDEuNjItMS42NiAyLjA4Ni43NjQtLjA5MiAxLjQ5LS4yOTMgMi4xNjgtLjU5NC0uNTA2Ljc1OC0xLjE0NiAxLjQyMi0xLjg4NCAxLjk1M3oiLz48L3N2Zz4=);
}

<div class="case-1"></div>
<div class="case-2"></div>