Сохраняйте пропорции SVG, уменьшая размер окна (или контейнера)

Question

У меня есть SVG-графика, которая является дочерним элементом контейнера.

Если я хочу, чтобы он соответствовал полной ширине этого контейнера, я обычно делаю preserveAspectRatio="none" и устанавливаю ширину на 100% (с дополнительным значением высоты, если я хочу добавить некоторую дополнительную высоту в SVG).

Однако мне бы хотелось, чтобы SVG соответствовал контейнеру, но когда я перетаскиваю окно в меньший размер, форма клина (т.е. диагональный угол SVG) остается под тем же углом, в то время кактакже все еще заполняет контейнер.

В примере кода я сохранил код preserveAspectRatio=none, чтобы показать общий эффект, который я хотел бы (разница, конечно, в том, что угол клина должен оставатьсятак же как окно уменьшено в размерах).

Возможно ли это?Я изо всех сил пытаюсь найти способ заставить это работать.

Вот кодекс: https://codepen.io/emilychews/pen/pGbPby

body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.container {
  width: 80%;
  height: 10rem;
  background: lightblue;
  position: relative;
}

.wedge {
  width: 100%;
  left: 0;
  bottom: 0;
  height: 4rem;
  position: absolute
}

<div class="container">
  <svg class="wedge" preserveAspectRatio="none" aria-hidden="true" viewBox="0 0 376.9 122.7">
    <polyline fill="#000" points="376.9 122.69 0 122.35 376.55 0 376.9 122.69"/>
  </svg>
</div>

Answer 1

Если вы хотите, чтобы SVG сохранял соотношение сторон, а не растягивался, не используйте preserveAspectRatio="none".Используйте другое значение preserveAspectRatio.Например "xMinYMax slice".

body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.container {
  width: 80%;
  height: 10rem;
  background: lightblue;
  position: relative;
}

.wedge {
  width: 100%;
  left: 0;
  bottom: 0;
  height: 4rem;
  position: absolute
}

<div class="container">
  <svg class="wedge" preserveAspectRatio="xMinYMax slice" aria-hidden="true" viewBox="0 0 376.9 122.7">
    <polyline fill="#000" points="376.9 122.69 0 122.35 376.55 0 376.9 122.69"/>
  </svg>
</div>

Однако вам, очевидно, придется решить, что вы хотите сделать, если страница станет достаточно широкой, чтобы клин стал настолько высоким, что верхняя часть отсекается,Например, в вашем примере (и в моем примере выше) вы ограничили высоту SVG 4em.Таким образом, вы видите только нижнюю часть клина.

Если я изменю высоту SVG на 100%, вы увидите больше.

body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.container {
  width: 80%;
  height: 10rem;
  background: lightblue;
  position: relative;
}

.wedge {
  width: 100%;
  left: 0;
  bottom: 0;
  height: 100%;
  position: absolute
}

<div class="container">
  <svg class="wedge" preserveAspectRatio="xMinYMax slice" aria-hidden="true" viewBox="0 0 376.9 122.7">
    <polyline fill="#000" points="376.9 122.69 0 122.35 376.55 0 376.9 122.69"/>
  </svg>
</div>

Конечно, вы также можете уменьшить угол клина.