Question

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 CSS

svg {
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    z-index:0;
}

当窗口很大时，SVG会完美显示，并且svg停靠在蓝色区域的底部。但是，当我将窗口缩小到一个小宽度时，SVG不再停靠在底部，似乎垂直位于页面的中心。

我有什么方法可以做到这一点，无论窗户有多小，但建筑物的底部总是坐在蓝色框的底部。

谢谢。

Answer 1

使用preserveAspectRatio属性。将此属性添加到<svg>开头标记：

preserveAspectRatio="xMidYMax"

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

请参阅：http://jsfiddle.net/helderdarocha/t5rhp/8/

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

1 个答案: