Question

我目前有两个互锁的SVG，但是较高的SVG（imgur链接中的第一个）的作用就像是一个矩形，并且“推”较低的SVG（imgur链接中的第二个图片）远离它，它们之间的距离很大（第三个imgur链接）。到目前为止，我仅更改了代码中第二个SVG的宽度。如果不手动对齐它们，这会破坏我页面的响应能力，有没有办法给SVG一个较小的点击框或类似的框？

https://imgur.com/a/YtBuso4

TwoToThe

谢谢

Answer 1

我认为，解决您问题的最简单方法是减小第一个<svg>的viewBox高度，但要显示溢出。这样，底部的三角形将在第二个<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的一部分，如果两者都引用相同的类名，则两种样式都将应用于这两种路径。我已经更改了其中一个的类名，所以不会发生。

另一个问题是HTML中的<svg>元素是内联块。因此，它们具有线高，并且如果将它们显示为一个高度低于另一个高度（由于默认宽度为100％，在这里会发生这种情况），可能会导致其布局框之间的可见间隙很小。设置display:block可以解决这个问题。

如何使倾斜的SVG互锁

1 个答案: