SVG를 좌우로 정렬하여 나란히 이미지 만들기

Question

나는 동일한 이미지를 나란히 놓고 같은 크기가되도록 서로 옆에 터널 1과 터널 2를 놓으려고합니다. 초급 질문에 사과드립니다, 고마워요.

현재 나는 정확히 어떻게 원하는 것을 명확하지 않다, 그래서 당신은 자식 SVGs에 대한 콘텐츠를 제공하지 않은

<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

있습니다.

일부 직사각형을 추가했으며 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>

이 작동

(상자 서로 인접 것) 한 문서가 폭보다 키가 크다있다. 페이지가 사각형보다 넓 으면 너비와 높이를 50 %로 설정 했으므로 두 개의 하위 SVG도 마찬가지입니다.

개의 일반적인 솔루션은 이것에 있습니다

(a) 최 SVG를 정사각형 또는 높이이거나, 또는 한 세트의 크기를 줄 (b) 하위 SVGs 정렬들이 맞닿는 상부 중앙 지점에 있도록 .

preserveAspectRatio 속성을 사용하면 (b)를 달성 할 수 있습니다. 왼쪽 하위 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>