无法将此SVG编码为有效的背景图片

Question

我有一个SVG：

<svg xmlns="https://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="stripes" patternUnits="userSpaceOnUse" width="7" height="6" patternTransform="rotate(45)">
      <line x1="1" y="0" x2="1" y2="7" stroke="#fffa72" stroke-width="1.5" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="#fffeea" />
  <rect width="100%" height="100%" fill="url(#stripes)" />
</svg>

它使用外部工具进行了测试，效果很好：

现在，我想在背景图片中使用它。我用https://www.url-encode-decode.com/

对SVG进行了编码

然后我将编码后的SVG放入SCSS中：

background-image: url('data:image/svg+xml;charset=utf8,%3Csvg+xmlns%3D%22https%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22+width%3D%22100%25%22+height%3D%22100%25%22%3E%0D%0A++%3Cdefs%3E%0D%0A++++%3Cpattern+id%3D%22stripes%22+patternUnits%3D%22userSpaceOnUse%22+width%3D%227%22+height%3D%226%22+patternTransform%3D%22rotate%2845%29%22%3E%0D%0A++++++%3Cline+x1%3D%221%22+y%3D%220%22+x2%3D%221%22+y2%3D%227%22+stroke%3D%22%23fffa72%22+stroke-width%3D%221.5%22+%2F%3E%0D%0A++++%3C%2Fpattern%3E%0D%0A++%3C%2Fdefs%3E%0D%0A++%3Crect+width%3D%22100%25%22+height%3D%22100%25%22+fill%3D%22%23fffeea%22+%2F%3E%0D%0A++%3Crect+width%3D%22100%25%22+height%3D%22100%25%22+fill%3D%22url%28%23stripes%29%22+%2F%3E%0D%0A%3C%2Fsvg%3E');

这不起作用。背景保持为空。我知道我的HTML效果很好，因为当我在网上找到的不同背景图片插入SVG时，效果很好：

background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22a%22%20patternUnits%3D%22userSpaceOnUse%22%20width%3D%225%22%20height%3D%225%22%20patternTransform%3D%22rotate(45)%22%3E%3Cpath%20stroke%3D%22%23fffa72%22%20d%3D%22M1%200v5%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23a)%22%2F%3E%3C%2Fsvg%3E');

我在做什么错？

Answer 1

您的xmlns值不正确。是http://www.w3.org/2000/svg，而不是https://。

body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='stripes' patternUnits='userSpaceOnUse' width='7' height='6' patternTransform='rotate(45)'%3E%3Cline x1='1' y='0' x2='1' y2='7' stroke='%23fffa72' stroke-width='1.5' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%23fffeea' /%3E%3Crect width='100%25' height='100%25' fill='url(%23stripes)' /%3E%3C/svg%3E");
}
html, body {height: auto;}

<div></div>

文档：https://www.w3.org/2000/svg-是，带有https://：D

在嵌入式<svg>元素中，大多数浏览器在无法解析时会将属性默认为http://www.w3.org/2000/svg（您可以将其删除，并且仍然可以使用）。但是对于background-image base64编码的SVG，他们不这样做。

简而言之，如果无效，它将不能用作图像。

Answer 2

也许这不是您确切问题的答案，
但是您可以使用linear-gradient来编写background，并使用更简单的代码：

body {
  background: linear-gradient(135deg, #fff 2px, #fffa72, #fff 5px, #fff 9px, #fffa72, #fff 12px) 0 0 / 10px 10px;
}

Answer 3

将svg保存到file.svg，然后尝试使用https://www.developertoolkits.com/base64/encoder

它会拍摄图像并将其转换为数据url，然后您可以像尝试做的那样将它们内联或放入CSS中。

您使用的网站是网址编码器。