Base64编码的SVG图像作为背景-图像CSS属性
Base64编码的SVG图像作为背景-图像CSS属性
提问于 2019-04-19 18:12:53
我不确定我在这里做错了什么，我想使用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如果我用base64编码的jpg替换svg图形，它可以很好地工作&图形是可见的，但是SVG是不可见的。对于经过SVG编码的数据，Firefox不会将background-image属性标记为无效，但是会将其显示为具有0 0维度。
如何使用background-image显示编码后的SVG
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-19 18:35:51
我已经将viewBox的值更改为viewBox='-166 -589 532 71'，因为您的(viewBox='0 0 141 19')将把形状放在远离svg canvas的地方。我希望它能帮上忙。
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55760236
复制相关文章
相似问题
腾讯云开发者
