svg线条对底部边框的奇怪效果答案

【问题标题】：Svg line strange effect on bottom-bordersvg线条对底部边框的奇怪效果
【发布时间】：2020-03-07 07:24:39
【问题描述】：

如果svg 行对border-bottom 产生奇怪的影响，有人说我？

我有这个 html：

 <div id="father">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="transform: rotate(360deg);background: #34495e;">
    <path fill-opacity="1" d="M0,224L60,208C120,192,240,160,360,138.7C480,117,600,107,720,138.7C840,171,960,245,1080,245.3C1200,245,1320,171,1380,133.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" fill="#e4f1fe"></path>
  </svg>
  <div id="subsling"></div>
  <!-- This line appears and disappears depending on the size of the browser window. -->
  </div>

【问题讨论】：

确实在 svg 元素和下一个 div 之间有一个小空间。您可以在 svg 元素中添加display:block;
@enxaneta 它已经拥有这些属性但什么都没有......

标签： html css svg cross-browser

【解决方案1】：

正如我所评论的：添加svg{display:block;} 到svg

svg{width:100%;display:block;}
#subsling{background: #e4f1fe;padding:1em;}

<div id="father">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="transform: rotate(360deg);background: #34495e;">
          <path fill-opacity="1" d="M0,224L60,208C120,192,240,160,360,138.7C480,117,600,107,720,138.7C840,171,960,245,1080,245.3C1200,245,1320,171,1380,133.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" fill="#e4f1fe"></path>
</svg>  
 <div id="subsling">
   <p>wertyui wertyuio ertyufghjklñ  ertyuiop eghjkl </p>
 </div>
</div>

【讨论】：

没什么，线出现又消失
在这种情况下，您必须更新您的问题并添加一个发生这种情况的示例
我应该添加相同的图像吗？