关于使用内联背景 SVG 的快速问题

Question

我正在尝试使用内联 SVG 作为背景，但到目前为止还无法正常工作。我阅读了一些 Whosebug 帖子和 this css-关于如何做到这一点的技巧文章，但我无法让它工作:(

我正在尝试按照 css-tricks 文章中提供的说明使用简单的“X”SVG 作为 CSS 背景值，但显然我做错了什么，因为没有显示我的页面。下面是我的代码片段。

body {
  background: black;
}

.container {
 background:url('data:image/svg+xml,utf-8,<svg stroke="%23fff" viewBox="0 0 40 40"><path d="M 10,10 L 30,30 M 30,10 L 10,30"></path></svg>');
  height: 100vh;
  width: 90vw;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container"></div>
  <!-- <svg stroke="#fff" viewBox="0 0 40 40"><path d="M 10,10 L 30,30 M 30,10 L 10,30"></path></svg> -->
</body>
</html>

我将 HTML 文件中的 SVG 注释掉了。如果你取消注释，你可以看到当我正常使用它时 SVG 工作正常（作为 HTLM 元素）。只有当我将它用作 CSS 背景时，它才会崩溃。我尝试使用 base64 编码网站对其进行编码，因为我读到它解决了某些人的问题，但它对我不起作用。我不确定我在这里做错了什么。

我知道这可能是一个愚蠢的问题，所以我对此表示歉意。提前感谢任何提供帮助的人！

Answer 1

您有 1 个拼写错误，并且缺少 1 个命名空间定义：

错误： data:image/svg+xml,utf-8,<svg stroke="%23fff"

对 : data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" stroke="%23fff"

body {
  background: black;
}

.container {
  background:url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" stroke="%23fff" viewBox="0 0 40 40"><path d="M 10,10 L 30,30 M 30,10 L 10,30"></path></svg>');
  height: 100vh;
  width: 90vw;
}

  <div class="container"></div>

Answer 2

body { 背景图像：url("")}

关于使用内联背景 SVG 的快速问题

Quick question about using inline background SVGs

html

css

svg

background