Размер фона с 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%"}); } 

  1. svg (original height = 1050) добавить непосредственно к себе файл svg preserveAspectRatio = “none” height = “2100”
  • Поддержка SVG на Android
  • Волна (или форма?) С рамкой на CSS3
  • Угловые и SVG-фильтры
  • Как преобразовать PNG-изображение в SVG?
  • Пакетное преобразование изображений SVG в нужный размер PNG или ICO
  • Как разместить треугольники стрелки на линиях SVG?
  • Рисуем SVG на canvasе HTML5 с поддержкой элемента font
  • Есть ли способ использовать SVG как контент в псевдоэлементе: до или: после
  • Устаревшая анимация SMIL SVG заменена эффектами CSS или веб-анимации (наведите курсор, щелкните)
  • Оттенок SVG отключен
  • Selenium WebDriver : как нажимать на элементы в SVG с помощью XPath
  • Interesting Posts

    Чрезмерное торрентирование и здоровье жесткого диска

    Параллельные соединения

    Угловой HttpPromise: разница между методами `success` /` error` и аргументами `then`

    Проблема Webkit CSS Animation – сохранение конечного состояния анимации?

    Возможно ли переместить / переименовать файлы в Git и сохранить их историю?

    Как firstprivate и lastprivate отличаются от private clauses в OpenMP?

    Каков наилучший способ распространения приложений Java?

    Почему я не должен #include ?

    Почему этот код не генерирует исключение ConcurrentModificationException?

    Как заставить Windows 7 Network показывать общий ресурс Samba после перезагрузки или восстановления VM?

    Процесс Vim останавливается после выполнения внешней команды

    Почему мне нужно вручную установить кадр моего представления в viewDidLoad?

    Студия Android, gradle и NDK

    Каков самый быстрый способ передачи файлов между двумя компьютерами?

    Как определить текущий номер версии приложения с помощью apt-get

    Давайте будем гением компьютера.