SVG в пропорциях элементов img не учитывается в ie9 - PullRequest
Новая
       42

SVG в пропорциях элементов img не учитывается в ie9

40 голосов
/ 20 марта 2012

CSS: 

img{
    max-height:30px;
}

HTML: 

<img src="foo.svg" />

Я ищу это изображение SVG, чтобы масштабировать его пропорционально максимальной высоте 30 пикселей в высоту. Естественные размеры svg - 200 на 200 пикселей. Отлично работает в FF и Chrome (30x30), но в IE9 изображение 30x200. Теперь вот кикер. Это происходит только с определенными файлами SVG, другие SVG корректно масштабируются.

Кажется, разница в том, что один состоит из полигонов, а другой - из путей.

неправильно масштабируется:

http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg

правильно масштабируется:

http://www.radiantinteractive.com/rs/images/allies/technologyLogos/groovy.svg

есть идеи о том, почему это происходит, или как я могу получить первый масштаб пропорционально в ie9?

Ответы [ 5 ]

112 голосов
/ 20 марта 2012

Чтобы добиться более согласованного масштабирования в разных браузерах, всегда указывайте viewBox, но не указывайте атрибуты width и height в элементе svg.Я создал тестовую страницу для сравнения эффекта указания различных атрибутов SVG в сочетании с широтой и высотой, указанными в CSS.Сравните его в нескольких разных браузерах, и вы увидите много различий в обработке.

21 голосов
/ 07 ноября 2013

Исправить это в ie9 и не зацикливаться на этом.Я не знаю почему, но вы должны установить ширину: 100% через css-rule, но не в img-tag.Соотношение сторон будет работать по волшебству)) Мне помогло, надеюсь этот пост поможет другим.

9 голосов
/ 22 марта 2015

Вы также можете посмотреть здесь: https://gist.github.com/larrybotha/7881691 - это продолжение этой «истории».

Исправление SVG в <img> тегах, не масштабируемых в IE9, IE10, IE11

IE9, IE10 и IE11 неправильно масштабируют файлы SVG, добавленные с тегами img, когда указаны атрибуты viewBox, width и height. Просмотрите эту кодовую ручку в разных браузерах.

Высота изображения не будет масштабироваться, когда изображения внутри контейнеров уже, чем ширина изображения. Это можно решить двумя способами.

Используйте sed в bash для удаления атрибутов ширины и высоты в файлах SVG

Согласно этому ответу в Stackoverflow проблему можно решить, удалив только атрибуты width и height.

Этот небольшой скрипт рекурсивно ищет SVG-файлы в вашем текущем рабочем каталоге и удаляет атрибуты для кросс-браузерной совместимости: 

find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*" //' -e 's/height="[0-9]*\.*\[0-9]*" //'

Предостережения

Удаление атрибутов width и height заставит изображение занимать всю ширину своего контейнера в браузерах, отличных от IE.

IE10 (другие браузеры требуют тестирования) уменьшит изображения до некоторого произвольного размера - это означает, что вам нужно будет добавить width: 100% к вашему CSS, чтобы эти изображения соответствовали их контейнерам.

Целевой IE с CSS

Поскольку вышеприведенное решение в любом случае требует CSS, мы могли бы также использовать хак, чтобы заставить IE вести себя, и не беспокоиться о необходимости управлять каждым отдельным SVG-файлом.

Следующее будет предназначаться для всех тегов img, содержащих файл SVG, в IE6 + (однако, только IE9 + поддерживает файлы SVG). 

/*
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 *
 * [1] IE9
 * [2] IE10+
 */
/* 1 */
.ie9 img[src*=".svg"] {
  width: 100%; 
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    width: 100%; 
  }
}

Предостережения

Это предназначается для каждого тега img, содержащего ".svg" в IE9, IE10 и IE11 - если вы не хотите, чтобы это поведение было на определенном изображении, вам придется добавить класс, чтобы переопределить это поведение для этого изображения.

1 голос
/ 21 октября 2014

Я потратил недель , пробуя всевозможные решения, чтобы иметь возможность использовать SVG на адаптивном по размеру веб-сайте, который работает для основных современных браузеров.

SVG необходимо масштабировать с использованием процентов CSS и включать встроенные растровые изображения.

Решение only , которое я нашел для процентного изменения размера в IE, заключается в вставке внешних SVG в тег .

Существуют различные решения для изменения размера SVG в IE до строгих размеров в пикселях, но ни одно из них не работает для изменения размера в процентах.

Я создал неисчерпывающий набор тестов здесь .

0 голосов
/ 03 июня 2015

Каким-то образом этот scss решил мою проблему. 

ul {
  li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
    img {
      height: 20px;
      margin: 0 10px;
      display: inline-block;
    }
  }
}

Я на самом деле составлял список логотипов для нижнего колонтитула и имел проблемы с шириной. Обычно я создаю встроенный блок с элементом блока внутри него. Создание встроенного элемента с элементом встроенного блока работало для меня. Это специфическая реализация, которая показала мне ошибку, и она не устраняет каждую ошибку, но, надеюсь, она поможет кому-то прочесть это.

...