这是我的代码:http://jsfiddle.net/t5rhp/7/

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不再停靠在底部,并且似乎垂直地位于页面的中央。

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

谢谢。

最佳答案

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

preserveAspectRatio="xMidYMax"


它将使图像居中并始终将其保持在底部(最大Y值)。

参见:http://jsfiddle.net/helderdarocha/t5rhp/8/

09-11 19:02
查看更多