我有一个简单的SVG图像：
<svg width="auto" height="10px" viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M0 0 H 20 L 10 20 Z" fill="yellow"></path>
<path d="M30 20 H 50 L 40 0 Z" fill="black"></path>
<path d="M60 0 H 80 L 70 20 Z" fill="yellow"></path>
</svg>
我认为将其包含在A :: pseudo-element与Sass之前：
之前，我认为将其包含在一个::div:before {
content: str-replace(url('data:image/svg+xml;charset=utf8,%3Csvg width='auto' height='10px' viewBox='0 0 80 20' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M0 0 H 20 L 10 20 Z' fill='yellow'%3E%3C/path%3E%3Cpath d='M30 20 H 50 L 40 0 Z' fill='black'%3E%3C/path%3E%3Cpath d='M60 0 H 80 L 70 20 Z' fill='yellow'%3E%3C/path%3E%3C/svg%3E'), "#", "%23");
}
https://codepen.io/deka87/pen/zrmmpr
但是，我在Codepen和本地编译器中都会收到一条错误消息。任何帮助将不胜感激！
尝试以下：
div::before {
content: '';
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%22auto%22%20height%3D%2210%22%20viewBox%3D%220%200%2080%2020%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200h20L10%2020z%22%20fill%3D%22%23ff0%22/%3E%3Cpath%20d%3D%22M30%2020h20L40%200z%22/%3E%3Cpath%20d%3D%22M60%200h20L70%2020z%22%20fill%3D%22%23ff0%22/%3E%3C/svg%3E');
}
我使用http://www.grumpicon.com/此网站转换CSS背景的SVG