Кроссбраузерный SVG в адаптивном или гибком макете?

Я решил использовать библиотеку javascript Raphaël из-за ее обширной поддержки браузерами, но у меня возникли проблемы с правильным отображением SVG в любом браузере, кроме Chrome и Firefox. Я уже некоторое время ломаю голову над этим и хотел бы услышать, как заставить SVG работать в адаптивном макете.

Chrome и Firefox отображают SVG именно так, как мне хотелось бы. Он масштабируется равномерно, поддерживает правильное соотношение сторон и процент родительского элемента при заданной ширине.

Internet Explorer поддерживает правильное соотношение сторон, но неправильно масштабируется со своим родителем.

Safari корректно масштабируется с родителем по ширине, но не по высоте. Высота по отношению к родительскому контейнеру каким-то образом установлена ​​на 100%.

JavaScript

var menu = Raphael('menu', '100%', '100%');

menu.setViewBox('0', '0', '50', '50', true);

var menu_bg = menu.rect(0,0, 50, 50);
    menu_bg.attr({
        id : 'menu_bg',
        'stroke-width' : '0',
        'fill' : '#000'
    });

CSS

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    height: 100%;
}
#menu { 
    width: 50%;
    background: #60F;
    padding: 2.5%;
}
#menu svg { 
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
}
#text { 
    width: 50%;
    background: #309;
    padding: 2.5%;
    color: #FFF;
}

HTML

<div id="menu"></div>

<div id="text"> 
Filler text
</div>

Живой пример можно посмотреть по адресу

Различия отображения SVG в браузерах


javascript svg css fluid raphael
person Jason    schedule 07.06.2013    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете добавить эти свойства в свой тег SVG — <svg viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">, чтобы сохранить соотношение сторон.

Взято из статьи, которую я прочитал в...

Чтобы сохранить соотношение сторон содержащего элемента и обеспечить равномерное масштабирование, мы включаем атрибуты viewbox и saveAspectRatio.

Значением атрибута viewbox является список из четырех чисел, разделенных пробелами или запятыми: min-x, min-y, ширина и высота. Определяя ширину и высоту нашего окна просмотра, мы определяем соотношение сторон изображения SVG. Значения, которые мы установили для атрибута saveAspectRatio — 300 × 329 — сохраняют пропорции, определенные в окне просмотра.

Из эта статья.

person GusRuss89    schedule 07.06.2013
comment
Спасибо за ответ, но, к сожалению, он все еще не работает. :( Я присвоил параметру saveAspectRatio это значение, используя paper.setViewBox Рафаэля, и только что попробовал его, используя paper.canvas.setAttribute('preserveAspectRatio', 'xMidYMid meet');. Как упоминалось ранее, все это отлично работает в Chrome и Firefox, но по какой-то причине Safari расширяет высоту контейнера до 100%, а Internet Explorer (10) неправильно масштабируется по отношению к родительскому контейнеру. - person Jason; 07.06.2013