我通常会尝试自己弄清楚这些事情，但是经过一定时间后，换另一只眼睛去看是有好处的。我把问题简化为一个小例子：
问题在于，当将路径加载到CSS中时，填充不起作用。我需要.myicon1显示为蓝色，但正如您在示例中所见，它只是丢失了。我正在尝试通过CSS而不是直接在HTML中加载SVG，它的工作方式如第三个框所示，但如果我尝试填充它，则不起作用，如第二个框所示，它消失了。
第二个/中间的框应该像第一个框一样是蓝色，而不是消失。
https://jsfiddle.net/xekon/9vcrfs0p/
或者，如果愿意，可以将以下代码保存到testing.html：
<!DOCTYPE html>
<html>
<head>
<style>
.mysvg {
width: 100px;
height: 100px;
border: 5px solid black;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: inline-block;
}
.myicon1 {
background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M 10 75 Q 50 10 100 75 T 190 75" fill="#0099ff"/></svg>')
}
.myicon2 {
background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M 10 75 Q 50 10 100 75 T 190 75"/></svg>')
}
</style>
</head>
<body>
<!-- Created Directly in HTML -->
<span class="mysvg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M 10 75 Q 50 10 100 75 T 190 75" fill="#0099ff"/></svg></span>
<!-- FILL NOT WORKING,makes SVG disappear -->
<span class="mysvg myicon1"></span>
<!-- Same as above but without the FILL -->
<span class="mysvg myicon2"></span>
</body>
</html>