it-swarm.com.ru

SVG в пропорциях элементов img не соблюдается в ie9

CSS:

img{
    max-height:30px;
}

HTML:

<img src="foo.svg" />

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

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

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

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

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

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

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

40
Fresheyeball

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

111
robertc

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

21
Able

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

9
Martenti

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

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

Только решение, которое я нашел для процентного изменения размера в IE, заключается в том, чтобы встраивать внешние SVG в тег <object>.

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

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

1
Andrew Swift

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

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

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

0
Brandon Buttars