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以创建并排图像

1 个答案: