Размер фона с SVG в IE9-10

У меня есть набор div с фоновым изображением:

<div>Play Video</div>

со следующим CSS:

div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}

Размер фона соблюден в Firefox, Safari и Chrome. В IE8 SVG заменяется файлом PNG. Однако в IE9 и IE10 файл SVG резко уменьшается. Проблема, похоже, связана с шириной и высотой div. Если я добавлю высоту 150 пикселей, SVG будет отображаться правильно. Если я сделаю это меньше (то есть 100px), графическое изображение начнет уменьшаться.

Кто-нибудь нашел способ исправить эту проблему в Проводнике? Есть ли способ сказать IE использовать значение фонового размера независимо от ширины и высоты div?

Ответы

Ответ 1

Убедитесь, что ваш SVG имеет указанные width и height. Если вы создаете его из Illustrator, убедитесь, что поле "Отзывчивое" не отмечено, поскольку этот параметр удаляет ширину и высоту.

Ответ 2

Добавление ширины и высоты в SVG, поскольку mbxtr сказал, что почти сработало для меня. Мне нужно было добавить preserveAspectRatio="none slice", чтобы он работал оперативно в IE.

Ответ 3

Ну, похоже, что есть решение. Сюрприз Сюрприз. Это IE в конце концов. В результате я использовал следующий код:

div {
padding: 20px;
width: 150px;
position: relative;
}

div:after {
position: absolute;
content: "";
width: 40px;
height: 40px;
top: 50%;
right: 30px;
margin-top: -20px;
background-image: url('icon.png');
background-image: url('icon.svg'), none;
}

Мне понравилась более чистая версия, но этот хак работает во всех современных браузерах, включая IE8, 9 и 10 (возможно, 11, но я не тестировал).

Ответ 4

Для меня эти 3 исправления помогли:

  • Если возможно, установите фоновое положение на "центр"
  • В фоновых размерах установлены оба значения, "100% авто" не будет делать трюк, поэтому используйте "100% 100%"
  • Если это все равно не поможет изменить последнее значение атрибута "viewBox" самого SVG и сделать его на один пиксель шире и выше ширины и высоты SVG. Это немного сокращает SVG, но останавливает IE от его отсечения - и меньший размер не будет замечен вообще.

Ответ 5

У меня была эта проблема, и я обнаружил, что либо удаляю высоту и ширину внутри кода для svg, но сохранение viewBox может решить проблему.

Я рекомендую использовать сайт компилятора, например: https://jakearchibald.github.io/svgomg/ и установка опции "предпочитает viewBox по высоте и ширине"

ТАКЖЕ, если ничего из этого не работает, в Illustrator попробуйте применить квадратный фон вокруг изображения svg, но оставив достаточное дополнение по краям.

И импортируйте svg в свою таблицу стилей → data uri:... Пример:

background-image: data-uri ('image/svg + xml; charset = UTF-8', 'где/your/svg/is/found');

Ответ 6

У нас была аналогичная проблема с фоновыми изображениями SVG, которые не были полным сайтом содержащего элемента (например, увеличительным стеклом слева от входа для поиска).

Мы создали SVG в Illustrator CC, но пропустили их через оптимизатора SVG Peter Collingridge, чтобы вытащить все ненужные трещины. http://petercollingridge.appspot.com/svg-optimiser

Ответ 7

Я попробовал решение @mbxtr

Убедитесь, что ваш SVG имеет ширину и высоту. Если вы создаете его из Illustrator, убедитесь, что поле "Отзывчивое" не отмечено, поскольку этот параметр удаляет ширину и высоту.

Это все еще не работало для меня в окнах Chrome и IE. Я экспортировал значок шрифта, поэтому, если у вас есть шрифт, убедитесь, что вы экспортируете его как:

  • "font: convert to outlines
  • и "отзывчивый" - false

Я также снял флажок "minify" на всякий случай...

Ответ 8

1. Javascript

    drips.style.top = -dripsTop + "px";
 var browser = window.navigator.userAgent;
  if (browser.indexOf("Trident") > 0) {
     $(".flow_space").css({"background":"url(../img/space2-ie.svg) no-repeat", "background-size":"100%"});
  }
  1. svg (оригинальная высота = 1050) добавить непосредственно к себе файл svg preserveAspectRatio = "none" height = "2100"