Obecnie mam dwa SVG, które zostały zaprojektowane tak, aby się ze sobą łączyć, ale wyższy SVG (pierwszy w łączu imgur) działa tak, jakby był prostokątem i „odpycha” niższy SVG (drugi obraz w łączu imgur) w dół od i kończą z dużą przestrzenią między nimi (trzeci link imgur). Do tej pory zmieniłem tylko szerokość drugiego SVG w kodzie. Bez ręcznego ich wyrównywania, które zrujnowałoby responsywność mojej strony, czy istnieje sposób na to, aby SVG miał mniejszy hitbox lub podobny?

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>

Dziękuję Ci

0
Jason Wren 21 listopad 2018, 21:36

1 odpowiedź

Najlepsza odpowiedź

Myślę, że najprostszym rozwiązaniem twojego problemu jest zmniejszenie wysokości viewBoxu pierwszego <svg>, ale pokazanie przepełnienia. W ten sposób trójkątna forma na dole „prześlizgnie się” pod drugim <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>

Zwróć uwagę, jak przeniosłem style poza pliki SVG. W każdym razie są one częścią tego samego DOM, a jeśli oba cytują tę samą nazwę klasy, oba style zostaną zastosowane do obu ścieżek. Zmieniłem nazwę klasy dla jednej z nich, więc tak się nie dzieje.

Inną kwestią jest to, że elementy <svg> w HTML są blokami śródliniowymi. Jako takie mają wysokość linii, a jeśli są wyświetlane jeden pod drugim (tak się dzieje tutaj, ponieważ ich domyślna szerokość wynosi 100%), może to prowadzić do małej widocznej przerwy między ich polami układu. Ustawienie display:block rozwiązuje ten problem.

1
ccprog 22 listopad 2018, 00:51