Кросс-браузерный 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 Display differences in browsers

Ответы

Ответ 1

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

Взятый из статьи, я прочитал, что в...

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

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

Из в этой статье.