Html 使用小型浏览器窗口进行SVG定位

这是我的密码：

SVG HTML

<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     x="0px" y="0px" 
     viewBox="0 0 1400 1120" 
     enable-background="new 0 0 1400 1120" 
     xml:space="preserve" id="city">
   <g id="bg2" enable-background="new">
...

当窗口较大时，SVG将完美显示，SVG停靠在蓝色区域的底部。但是，当我将窗口缩小到一个小宽度时，SVG不再固定在底部，而是垂直地位于页面的中心

有什么办法可以让我做到，无论窗户有多小，但建筑物的底部总是坐在蓝色盒子的底部

谢谢。

使用该属性。将此属性添加到

开始标记：

preserveAspectRatio="xMidYMax"

它将使图像居中，并始终保持在底部（Y max）

见：

preserveAspectRatio="xMidYMax"