Htykuut

I currently have two SVGs that were designed to interlock with eachother but the higher SVG (The first in the imgur link) acts as if it were a rectangle and "pushes" the lower SVG (The second picture in the imgur link) down away from it and they end up with a large space between them (The third imgur link). I have only changed the width of the second SVG in the code so far. Without manually aligning them, which would ruin my page's responsiveness, is there a way to give the SVG a smaller hitbox or similar?

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>

Thank you

I think the most simple solution to your problem is to lessen the viewBox height of the first <svg>, but to show the overflow. That way, the triangular form at the bottom will "slip" under the second <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>

Note how I have moved the styles outside the SVGs. They are part of the same DOM anyway, and if both quote the same class name, both styles will be applied to both paths. I've changed the class name for one of them, so that does not happen.

Another issue is that <svg> elements in HTML are inline-blocks. As such they have a line height, and if they are displayed one below the other (as happens here because their default width is 100%), that may lead to a small visible gap between their layout boxes. Setting display:block solves that.