Svg线条在底部边框上产生奇怪的效果

Question

Svg线条在底部边框上产生奇怪的效果

3

有人告诉我，如果一个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>

- Borja

1

确实，在svg元素和下一个div之间有一小段空白。您可以向svg元素添加"display:block;"。 - enxaneta

@enxaneta 它已经具备了这些属性，但仍然没有... - Borja

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- enxaneta · Accepted Answer

正如我所评论的: 将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>