Почему в этом 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>

Answer 2

viewBox определяет видимые размеры в SVG.

У вас 0 0 1440 320 ( мин-х , мин-у , ширина и высота ). Вы можете изменить его, чтобы обрезать содержимое SVG. Что-то вроде viewBox="0 230 1440 100" выглядит так, как будто подходит лучше

<div class="grey-curve-svg">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 230 1440 100">
    <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>