如何使用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>