Кодированное Base64 SVG-изображение как CSS-свойство Background-Image

Question

Я не уверен, что я делаю здесь неправильно, я хочу использовать SVG-графику в качестве фонового изображения, закодированного в base64. Я использовал yoksel.github.io для кодирования графики, однако графика не видна.

  .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

Если я заменю графику svg на jpg, закодированный в base64, он будет работать нормально, а графика будет видимой, однако SVG не будет видна. С данными, закодированными в SVG, Firefox не помечает свойство background-image как недопустимое, однако он показывает его как имеющие размеры 0 0.

Как отобразить закодированный SVG с помощью background-image?

Answer 1

Я изменил значение для viewBox на viewBox='-166 -589 532 71', поскольку ваше (viewBox='0 0 141 19') поместит фигуру далеко за пределы холста svg. Надеюсь, это поможет.

.borderCurve{
    /*position: absolute;
    bottom: -20px;*/
    background-image: url("data:image/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 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='red' /%3E%3C/svg%3E");
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    width: 158px;
    height: 20px;
    opacity: 0.7;
    outline:1px solid;
}

<div class="borderCurve"></div>