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

【问题标题】：Align SVG's left and right to create side-by-side image对齐 SVG 的左右以创建并排图像
【发布时间】：2015-01-13 17:45:55
【问题描述】：

我试图将隧道 1 和隧道 2 并排放置，以便它们并排显示相同的图像，并且大小相同。对不起，初学者的问题，谢谢。

目前我有

<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>

【问题讨论】：

标签： html css svg alignment stereo-3d

【解决方案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>

【讨论】：