Проблема с <svg>не масштабирующейся до ширины страницы

Question

У меня проблема с SVG, когда я пытаюсь «улучшить» и лучше разделить различные разделы на моем сайте, но этот путь SVG не хочет масштабироваться до ширины страницы, вместо этого его размер остается фиксированным. Элемент svg масштабируется, но путь остается прежним ... Я знаю, что есть способ сделать его масштабируемым должным образом. Вы можете помочь мне в этом?

svg {
  background: gold;
}

<svg version="1.1" width="100%" height="150" viewBox="800 -50 200 200">
	<path d="M0 107 L220 69 L484 135 L800 82 L800 150 L0 150 Z" />
</svg>

Answer 1

Измените атрибут width в элементе svg на абсолютное значение, а не на процентное значение. Если вы установите ширину 100%, это будет масштабировать границы вашего документа вместо масштабирования документа .

<svg version="1.1" width="150" height="150" viewBox="800 -50 200 200">
    <path d="M0 107 L220 69 L484 135 L800 82 L800 150 L0 150 Z" />
</svg>

Затем примените масштабирование ширины с помощью CSS:

svg {
  background: gold;
  width: 100%;
}

Answer 2

Я внес некоторые изменения в ваш SVG: я удалил width & height; таким образом ваш svg будет масштабироваться вместе с окном. Также я изменил ваш viewBox, так как это выглядело очень странно. Помните, что viewBox должно выглядеть так: viewBox(from_x from_y width height)

svg {
  background: gold;
}

<svg version="1.1" viewBox="0 0 800 200">
	<path d="M0,107 L220,69 L484,135 L800,82 L800,150 L0,150 Z" />
</svg>

Надеюсь, это поможет

Answer 3

Я бы сделал то же самое с фоном и градиентом, тогда вы хотите иметь проблему с масштабированием:

body {
  margin: 0;
  height: 100vh;
  background: 
   linear-gradient(to bottom right, transparent 49%, #000 50%) -80px calc(100% - 20px)/calc(100%/3 + 81px) 80px, 
   linear-gradient(to bottom left , transparent 49%, #000 50%)  50% calc(100% - 20px)/calc(100%/3) 80px, 
   linear-gradient(to bottom right, transparent 49%, #000 50%) 100% calc(100% - 20px)/calc(100%/3) 50px, 
   linear-gradient(#000, #000) bottom/100% 20px;
  background-color: yellow;
  background-repeat: no-repeat;
}

Другой способ с более простым кодом:

body {
  position:relative;
  margin: 0;
  height: 100vh;
  overflow:hidden;
  background-color: yellow;
}
body:after {
 content:"";
 position:absolute;
 bottom:0;
 height:80px;
 right:-80px;
 left:-80px;
 border-bottom:20px solid #000;
 background: 
   linear-gradient(to bottom right, transparent 49%, #000 50%) left, 
   linear-gradient(to bottom left , transparent 49%, #000 50%) center, 
   linear-gradient(to bottom right, transparent 49%, #000 50%) right;
  background-size:calc(100%/3) 100%;
  background-repeat: no-repeat;
}