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

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

Play Video

со следующим 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 будет отображаться правильно. Если я сделаю это меньше (т.е. 100 пикселей), графический объект начнет уменьшаться.

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

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

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

Ну, похоже, что нет решения. Сюрприз Сюрприз. Это 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, но я не тестировал).

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

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

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

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

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

И импортируйте svg в свою таблицу стилей, используя -> data uri: … example:

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

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

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

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

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

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

“font: convert to outlines”
и «отзывчивый» является ложным

Я также снял флажок «минимизировать» на всякий случай …

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%"}); }