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图形替换为以base64编码的jpg，它可以正常工作并且图形可见，但是，SVG不可见。对于SVG编码的数据，Firefox不会将background-image属性标记为无效，但是，它确实将其显示为0 0的维度。

如何使用background-image显示编码的SVG？

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>

Base64编码的SVG图像作为Background-Image CSS属性

1 个答案: