这是我的代码: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/