Блог

Главная - Вопросы по программированию - Позиционирование в формате SVG с небольшим окном браузера

Позиционирование в формате SVG с небольшим окном браузера

#html #css #svg

#HTML #css #svg

Вопрос:

Вот мой код: 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 больше не привязан к нижней части и, кажется, находится в центре страницы вертикально.

Могу ли я каким-либо образом сделать так, чтобы независимо от того, насколько маленьким было окно, нижняя часть зданий всегда находилась в нижней части синего окна.

Спасибо.

Ответ №1:

Используйте preserveAspectRatio атрибут. Добавьте этот атрибут в <svg> открывающий тег:

 preserveAspectRatio="xMidYMax"

Изображение будет располагаться по центру и всегда будет находиться внизу (Y max).

Смотрите: http://jsfiddle.net/helderdarocha/t5rhp/8 /

Метки: