Кросс-браузер SVG preserveAspectRatio

Я пытаюсь создать 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 теряется.

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

Ответы

Ответ 1

Похоже, я нашел решение:

Вам нужно сохранить свойства 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%" />

Кажется, что он работает повсюду.

Ответ 2

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

ширина: 100%; max-width: (желаемая ширина в px)

Ответ 3

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

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

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

Ответ 4

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

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

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