Перекрестный браузер SVG preserveAspectRatio

Я пытаюсь создать графику в формате в теге <img />, который будет соответствовать (без обрезки) внутри тега с сохраненным соотношением сторон. Я создал SVG в Inkscape. Он работал как ожидалось во всех браузерах, за исключением Internet Explorer 9.Перекрестный браузер SVG preserveAspectRatio

Чтобы заставить его работать на 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 теряется.

Разве это кросс-браузерное решение для этого поведения?

источник

2013-05-08 Peter Hudec

Кажется, я нашел решение:

Вы должны держать width и height свойства в SVG.

<svg 
    width="580" 
    height="220" 
    viewBox="0 0 580 220" 
    preserveAspectRatio="xMidYMid meet" 
>...</svg>

И чтобы заставить его работать на IE 9 необходимо указать по крайней мере одно измерение <img /> тега.

<img src="your.svg" style="width: 100%" />

Это, кажется, работает повсюду.

источник

2013-05-08 11:49:29

Я с этой проблемой с помощью «макс-ширина: 100%» в IE10 на Windows Phone 8 При этом «ширина: 100%» также разрешила его. Спасибо друг. –

Это сработало чудеса! Большое спасибо –

На самом деле, как только вы установите ширину элемента , вам больше не нужна ширина и высота, установленные в SVG. – gzost

Я решил, установив следующий CSS к:

ширина: 100%; max-width: (wishwidth in px)

источник

2015-02-25 14:27:08

Работает для меня, исправляя проблемы растяжения в IE11 - но как? –

Просто подумал, что добавлю, как я вступил в решение. Сначала мне не удалось выяснить некоторые проблемы.

Редактирование файла SVG для удаления жестко заданных атрибутов высоты и ширины. (с простым текстовым редактором)
Примените ширину: 100% css к вашему svg-изображению, чтобы IE отображал его как другие браузеры. (размером с контейнер)
Используйте css на контейнере изображений для получения согласованных результатов!

Я сделал страницу, чтобы описать это более подробно на http://ivantown.com/posts/svg-scaling-with-ie/

источник

2015-07-23 18:05:41

решение в моем случае использовал ответ Питера HUDEC, но из-за использования width: 100%; на <img /> тег, который сломал раскладку на каждом не IE9 браузер, я добавил только CSS-хаус IE9 (width: 100%\9\0;). Надеюсь, это дополнение поможет кому-то. :-)

Даже с использованием preserveAspectRatio="xMidYMid meet" не было необходимости.

(Я хотел бы добавить только комментарий, и не отвечать, но нет репутации еще не сделать это :-)

источник

2015-11-12 16:20:36 bencergazda

Перекрестный браузер SVG preserveAspectRatio

ответ

Смежные вопросы