Размер фона с SVG хлюпнул в IE9-10

Question

Размер фона с 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?

619 8

css svg internet-explorer-9 internet-explorer-10 background-size

8 ответов:

Comments

Ничего не найдено.

mbxtr · Accepted Answer · 2014-04-09 21:23:21

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

Simeon Rowsell · Accepted Answer · 2016-03-03 17:44:52

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

Julesfrog · Accepted Answer · 2014-02-18 18:51:22

Ну, это не похоже на решение. Сюрприз, сюрприз. Это т. е. после всех. В итоге я использовал следующий код:
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, но я не тестировал).

Christian Krammer · Accepted Answer · 2015-09-02 10:06:38

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

Если возможно, установите фоновое положение в "центр"

для фонового размера установите оба значения, "100% auto" не будет делать трюк, поэтому используйте "100% 100%"

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

Harry Joao · Accepted Answer · 2017-03-08 13:44:13

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

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

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

и импортировать svg в вашей таблице стилей с помощью -- > Data uri:... пример:

фон-изображения: данные-Ури('изображения/СВГ+в формате XML;кодировка=кодировка UTF-8',' где/ваш/СВГ/находится/находится');

Chaffron · Accepted Answer · 2014-08-18 17:21:27

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

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

Beatriz Gonzalez · Accepted Answer · 2016-03-11 13:22:42

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

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

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

"шрифт: преобразование в контуры"

и "отзывчивый" является ложным

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

Maksimov Maksim · Accepted Answer · 2016-06-15 09:07:48

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%"});
  }
svg (оригинальная высота=1050) добавить непосредственно к себе svg файл preserveAspectRatio=" нет "высота= "2100"