左右对齐 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%。

一般有两种解决方法：

(a) 给最外层的 SVG 设置一个正方形或高的尺寸，或者 (b) 对齐子 SVG，使它们紧靠顶部中间点。

您使用 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>

左右对齐 SVG 以创建并排图像

Align SVG's left and right to create side-by-side image

html

css

svg

alignment

stereo-3d