Base64编码SVG图像作为背景图像CSS属性

我不确定我在这里做错了什么，我想使用SVG图形作为背景图像，用base64编码。我曾经对图形进行编码，但是，图形不可见

  .borderCurve
    position: absolute
    bottom: -20px
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 141 19'%3E%3Cpath d='M366-589c-6 1-11 5-16 9-6 7-10 16-10 26 0 20-15 36-34 36h-411c-9 0-18-4-24-10-7-7-10-16-10-26 0-17-12-31-27-35h532z' fill='rgba(255,255,255,0.7)'/%3E%3C/svg%3E%0A")
    background-size: contain
    background-position: center top
    background-repeat: no-repeat
    width: 158px
    height: 20px
    opacity: 0.7

如果我用base64编码的jpg替换svg图形，那么效果很好&图形是可见的，但是svg是不可见的。对于SVG编码的数据，Firefox不会将

背景图像

属性标记为无效，但会将其显示为具有

0

维度

---

如何使用

背景图像显示编码的SVG？
我已将
viewBox
的值更改为
viewBox='-166-589 532 71'
，因为您的（
viewBox='0 141 19'
）会将形状放在SVG画布之外很远的地方。我希望有帮助


。边界曲线{
/*位置：绝对位置；
底部：-20px*/
背景图像：url（“数据：图像/svg+xml，%3Csvg xmlns=”http://www.w3.org/2000/svg“viewBox=”-166-589 532 71'%3E%3Cpath d='M366-589c-6 1-11 5-16 9-6 7-10 16-10 20-15 36-34 36h-411c-9 0-18-4-24-10-7-7-10-16-10-26 0-17-12-31-27-35h532z'fill='red'/%3E%3C/svg%3E'）；
背景尺寸：包含；
背景位置：中上；
背景重复：无重复；
宽度：158px；
高度：20px；
不透明度：0.7；
外形：1px实心；
}
非常感谢，就这样！