Совместите SVG по левому и правому краям, чтобы создать изображение рядом

Question

Я пытаюсь разместить tunnel1 и tunnel2 рядом друг с другом, чтобы они показывали идентичные изображения рядом и имели одинаковый размер. Извините за вопрос новичка, спасибо.

В настоящее время у меня есть

<svg
     version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="position: fixed; width: 100%; height: 100%; margin: 0;">


  <!--== TUNNEL ===============================================================-->
    <svg id="tunnel1"
       width="50%" height="50%"
       preserveAspectRatio="xMidYMid meet"
       viewBox="-100 -100 200 200"
       visibility="hidden">
    </svg>
    <svg id="tunnel2"
       width="50%" height="50%"
       preserveAspectRatio="xMidYMid meet"
       viewBox="-100 -100 200 200"
       visibility="hidden">
    </svg>
</svg>

Answer 1

Вы не предоставили никакого контента для дочерних SVG, поэтому неясно, что именно вы хотели сделать.

Я добавил несколько прямоугольников и удалил visibility="hidden" поэтому они видны. Осталось только расположить второй SVG вправо, что было легко достигнуто установкой x="50%",

<svg
     version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="position: fixed; width: 100%; height: 100%; margin: 0;">


  <!--== TUNNEL ===============================================================-->
    <svg id="tunnel1"
       width="50%" height="50%"
       preserveAspectRatio="xMidYMid meet"
       viewBox="-100 -100 200 200">
           <rect x="-100" y="-100" width="200" height="200" fill="red"/>
    </svg>
    <svg id="tunnel2"
       x="50%"
       width="50%" height="50%"
       preserveAspectRatio="xMidYMid meet"
       viewBox="-100 -100 200 200">
           <rect x="-100" y="-100" width="200" height="200" fill="green"/>
    </svg>
</svg>

Это будет работать (коробки будут прилегать друг к другу), пока документ выше, чем он широкий. Если страница шире, чем квадратная, то будут и два дочерних SVG, потому что вы установили их ширину и высоту 50%.

Есть два основных решения этого:

(а) дать внешнему SVG заданный размер, квадратный или высокий, или (b) выровнять дочерние SVG так, чтобы они упирались в верхнюю среднюю точку.

Вы достигаете (б), используя preserveAspectRatio приписывать. Расположите левый дочерний SVG в правом верхнем углу его области просмотра (xMaxYMin"), а правый дочерний SVG - в верхнем левом углу своего окна просмотра (xMinYMin").

<svg
     version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="position: fixed; width: 100%; height: 100%; margin: 0;">


  <!--== TUNNEL ===============================================================-->
    <svg id="tunnel1"
       width="50%" height="50%"
       preserveAspectRatio="xMaxYMin meet"
       viewBox="-100 -100 200 200">
           <rect x="-100" y="-100" width="200" height="200" fill="red"/>
    </svg>
    <svg id="tunnel2"
       x="50%"
       width="50%" height="50%"
       preserveAspectRatio="xMinYMin meet"
       viewBox="-100 -100 200 200">
           <rect x="-100" y="-100" width="200" height="200" fill="green"/>
    </svg>
</svg>