Ответ 1

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

Ответ 2

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

Ответ 3

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

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

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

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

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

В соответствии с fooobar.com/questions/132845/... проблема может быть решена путем удаления только атрибутов width и height.

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

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

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

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

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

Целевой IE с CSS

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

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

/*
 * Let 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 - если вы не хотите этого поведения на конкретном изображении, вам придется добавить класс, чтобы переопределить это поведение для этого изображения.

Ответ 4

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

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

Единственное решение, которое я нашел для процентного изменения размера в IE, - это встроить внешний SVG в объект <object> тег.

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

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

Ответ 5

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

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

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