如何修复svg背景的bug？

Question

我有一个问题。

我的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>

Answer 1

一些非常有创意的解决方案，但它确实有效。我用前后填充带边框的空白区域。当图像太小时。

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>