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

Хтось знайшов спосіб виправити цю проблему в Провіднику? Чи є спосіб сказати IE використовувати значення розміру фону незалежно від ширини та висоти div?

Переконайтеся, що у вашому SVG є widthі heightвказано. Якщо ви створюєте його з Illustrator, переконайтеся, що прапорець "Адаптивний" знятий, оскільки ця опція видаляє ширину та висоту.

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

Мені допомогли ці 3 виправлення:

• Якщо можливо, встановіть для фонового положення "центр"
• Для розміру фону встановіть обидва значення, "100% auto" не допоможе, тому використовуйте "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', 'where / your / svg / is / located');

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

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

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

Я спробував рішення @ mbxtr

Переконайтеся, що ваш SVG має вказану ширину та висоту. Якщо ви створюєте його з Illustrator, переконайтеся, що прапорець "Адаптивний" знятий, оскільки ця опція видаляє ширину та висоту.

Це все ще не працювало для мене у Windows Chrome та IE. Я експортував піктограму шрифту, тому, якщо у вас є шрифт, переконайтеся, що ви експортуєте його як:

• "шрифт: перетворити на контури"
• а "responsive" - ​​хибне

Я також зняв прапорець "мініфікувати" про всяк випадок ...

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

2. svg (вихідна висота = 1050) додайте безпосередньо до себе файл svg reserveAspectRatio = "none" height = "2100"

Розмір фонового зображення Svg стане таким самим у IE та Chrome, використовуючи ці властивості

background: #ffffff url("images/calendar.svg") no-repeat;
border: 1px solid #dddddd;
float: left;
margin: 0;
overflow: hidden;
background-size:15px 15px;

Я змінив усі свої SVG на не реагуючі в Illustrator безрезультатно.

І оскільки я шукаю приклади коду, я пропустив правильну відповідь, кажучи "переконайтеся, що у вашому SVG вказані ширина та висота", вони мали на увазі такі речі:

    .my-class {
        background-size: 200px 100px;
    }

І якщо розмір трохи зменшений в IE проти Chrome, наприклад, я використовував медіа-запит для націлювання на IE:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .my-class {
        background-size: 200px 110px;
    }
}