Как сделать угловую SVG-блокировку

Question

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

https://imgur.com/a/YtBuso4

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1250">
  <defs>
    <style>
      .cls-1 {
        fill: #190eae;
      }
    </style>
  </defs>
  <path id="bali-beautiful-beauty-433539" class="cls-1" d="M0,0H1920V1080L0,1250Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 1080.021" id="sectiona">
  <defs>
    <style>
      .cls-1 {
        opacity: 0.7;
      }
    </style>
  </defs>
  <g id="Group_78" data-name="Group 78" transform="translate(-488 -3248.979)">
    <path id="Path_26" data-name="Path 26" class="cls-1" d="M-1-16.511l960-85.021V978.489l-960-85Z" transform="translate(489 3350.511)"/>
  </g>
</svg>

Спасибо

Answer 1

Я думаю, что самое простое решение вашей проблемы - уменьшить высоту viewBox первой <svg>, но показать переполнение.Таким образом, треугольная форма внизу будет «скользить» под второй <svg>

svg {
    overflow:visible;
    display:block;
}
.cls-1 {
  fill: #190eae;
}
.cls-2 {
  opacity: 0.7;
}

<svg id="svg-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
  <path id="bali-beautiful-beauty-433539" class="cls-1" d="M0,0H1920V1080L0,1250Z"/>
</svg>

<svg id="svg-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 1080.021" id="sectiona">
  <g id="Group_78" data-name="Group 78" transform="translate(-488 -3248.979)">
    <path id="Path_26" data-name="Path 26" class="cls-2" d="M-1-16.511l960-85.021V978.489l-960-85Z" transform="translate(489 3350.511)"/>
  </g>
</svg>

Обратите внимание, как я переместил стили за пределы SVG.В любом случае они являются частью одного и того же DOM, и если оба они указывают одно и то же имя класса, оба стиля будут применены к обоим путям.Я изменил имя класса для одного из них, чтобы этого не произошло.

Другая проблема заключается в том, что <svg> элементы в HTML являются встроенными блоками.Как таковые, они имеют высоту строки, и если они отображаются один под другим (как здесь происходит, потому что их ширина по умолчанию составляет 100%), это может привести к небольшому видимому промежутку между их полями макета.Установка display:block решает это.