Как исправить ошибку с фоном SVG?

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>