如何修复svg背景的bug？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何修复svg背景的bug？相关的知识，希望对你有一定的参考价值。
我有一个问题。
我的svg backgound不满。部分背景消失了。
它必须看起来像这个
section {
padding: 20px;
width: 100%;
}
div {
width: 100%;
background-image: url('https://svgshare.com/i/6RG.svg');
height: 32px;
background-repeat: no-repeat;
background-size: cover;
}<section>
<div></div>
</section>我尝试使用background-size: 100% 100%;，background-position的一些变化。但它没有帮助我。
svg文件的代码。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 32" enable-background="new 0 0 1000 32" xml:space="preserve">
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="0" y1="0" x2="484.8" y2="0"/>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="484.8" y1="0" x2="500" y2="32"/>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="500" y1="32" x2="1000" y2="32"/>
</svg>答案
一些真正有创意的解决方案，但它的工作我用前后填充带边框的空白区域。当图像太小时。
section {
padding: 20px;
width: 100%;
}
div {
position: relative;
width: 100%;
background-image: url('https://svgshare.com/i/6RG.svg');
height: 32px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
div:before{
content: "";
position: absolute;
border-top: 1px solid #8e8e8e;
width: 40%;
left: 0;
top: 0;
}
div:after{
content: "";
position: absolute;
border-bottom: 1px solid #8e8e8e;
width: 40%;
right: 0;
bottom: 0;
}
@media (max-width:937px) {
div:after{
display: none;
}
div:before{
display:none;
}
}<section>
<div></div>
</section>以上是关于如何修复svg背景的bug？的主要内容，如果未能解决你的问题，请参考以下文章
css 针对Beaver Builder的Chrome bug固定位置背景图像行修复