Html 如何使有角度的SVG互锁

目前，我有两个SVG，它们被设计为相互联锁，但较高的SVG（imgur链接中的第一个）就像一个矩形一样，将较低的SVG（imgur链接中的第二个图片）向下推离它，它们之间有一个很大的空间——第三个imgur链接。到目前为止，我只更改了代码中第二个SVG的宽度。如果不手动对齐它们（这会破坏我的页面的响应能力），有没有办法让SVG具有更小的点击框或类似功能

---

谢谢

我认为解决您的问题最简单的方法是减小第一个视图框的高度，但显示溢出。这样，底部的三角形将滑到第二个三角形下方

svg{ 溢出：可见； 显示：块； } .cls-1{ 填充：190eae； } .cls-2{ 不透明度：0.7； }

---

就目前而言，你的问题很不清楚。请你编辑一下并加上一些代码好吗；理想情况下，两个SVG是否需要相对移动？如果是，以什么方式？如果是静态的，它们之间应该有一段距离吗？不，它们应该相互接触并插入，但是第一个SVG似乎占据了矩形的空间，作为SVG行的两个顶端。诀窍在于CSS属性溢出：可见，至少应用于第一个svg元素。我可以通过设置像素数量来删除顶部svg，但当我将其更改为使用视图高度/宽度时，它似乎不起作用，有没有办法解决这个问题？否则，我无法缩小网站，当我将其更改为使用视图高度/宽度时，它会做出响应：我不理解这一点。你在做什么？当我更改viewbox的高度或宽度时，我需要它相对于viewportI，我想一个更好的问题可能是：有没有更好的方法来创建一个由交替面对的梯形组成的网站，而不使用SVG的方法？

<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>