为什么这个 svg 中有多余的空白？

Question

我如何删除这个 svg 中多余的空白？当我检查蓝色曲线时，它是路径，突出显示的蓝色是整个 svg。我不明白我尝试调整视图框和几个不同的属性但不起作用？

.grey-curve-svg 只是一个没有样式的空 div。

这是 svg：

<div class="grey-curve-svg">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#0099ff" 
          fill-opacity="1" 
          style="--darkreader-inline-fill:#007acc;"  
          data-darkreader-inline-fill="" 
          d="M0,320L120,298.7C240,277,480,235,720,234.7C960,235,1201,277,1320,298.7L1440,320L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z" 
          ></path>
  </svg>
</div>

Answer 1

viewBox区域顶部有很多空白区域。调整 viewBox 尺寸可以解决这个问题...

<div class="grey-curve-svg">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 230 1440 320">
    <path fill="#0099ff" 
          fill-opacity="1" 
          style="--darkreader-inline-fill:#007acc;"  
          data-darkreader-inline-fill="" 
          d="M0,320L120,298.7C240,277,480,235,720,234.7C960,235,1201,277,1320,298.7L1440,320L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z" 
          ></path>
  </svg>
</div>