html - 如何使成 Angular SVG 互锁

Question

我目前有两个 SVG 设计为彼此互锁，但较高的 SVG(imgur 链接中的第一个)就像一个矩形，并“插入”较低的 SVG(imgur 链接中的第二张图片)远离它，它们最终会在它们之间留出很大的空间(第三个 imgur 链接)。到目前为止，我只更改了代码中第二个 SVG 的宽度。在不手动对齐它们的情况下，这会破坏我的页面的响应能力，有没有办法给 SVG 一个更小的 hitbox 或类似的东西？

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

我认为解决您问题的最简单方法是减少第一个 <svg> 的 viewBox 高度，而是显示溢出。这样，底部的三 Angular 形将“滑”到第二个 <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 中的元素是行内 block 。因此，它们有一个行高，如果它们一个一个地显示在另一个下方(因为它们的默认宽度为 100%)，这可能会导致它们的布局框之间出现一个小的可见间隙。设置display:block解决了这个问题。