Я пытаюсь создать SVG графику внутри тега <img />
, который будет соответствовать (без обрезки) внутри тега с сохраненным соотношением сторон. Я создал SVG в Inkscape. Он работал как ожидалось во всех браузерах, кроме Internet Explorer 9.
Чтобы заставить его работать с IE 9, мне пришлось добавить viewBox="0 0 580 220"
и preserveAspectRatio="xMidYMid meet"
и удалить свойства width="580"
и height="220"
SVG.
<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg>
Это казалось повсюду, пока я не попробовал его на Webkit, где тег <img />
растягивается вертикально, хотя соотношение сторон SVG действительно сохраняется.
Когда я возвращаю свойства width="580"
и height="220"
, он работает на Webkit, но в IE 9 коэффициент aspectr теряется.
Есть ли кросс-браузерное решение для этого поведения?