关于使用内联背景SVGs的快速问题
关于使用内联背景SVGs的快速问题
提问于 2021-04-10 16:52:04
我试图使用内联SVG作为背景，但到目前为止一直无法使它工作。我阅读了一些堆栈溢出文章和这 css技巧文章，介绍了如何做到这一点，但我无法让它开始工作：
我试图使用一个简单的"X“SVG作为CSS背景值，遵循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>
我把SVG放在HTML文件中注释掉了。如果取消注释，当我正常使用它(作为HTLM元素)时，可以看到SVG正常工作。只有当我使用它作为CSS背景时，它才会崩溃。我试着用base64编码网站对它进行编码，因为我读到它解决了一些人的问题，但它对我不起作用。我不知道我在这里做了什么错事。
我知道这可能是个愚蠢的问题，所以我为此道歉。提前感谢任何人的帮助！
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-04-10 17:30:57
您有一个错误和一个缺失的名称空间定义：
错误： data:image/svg+xml,utf-8,<svg stroke="%23fff"
right : 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>
Stack Overflow用户
发布于 2021-04-10 17:35:54
正文{背景-图像: url("")}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67036941
复制相关文章
相似问题
腾讯云开发者
