Почему не растягивается svg в IE?

Question

[frontender]

Привет!

Суть вопроса: у меня есть svg картинка, которую я вставляю фоном в div. И выставляю этому фону background-size: cover;

.element {
  background: url("../img/svg/purple.svg") center 50px no-repeat;
  background-size: cover;
}

В Chrome, Firefox и Opera растягивается на всю ширину экрана, а в IE нет. В чем может быть проблема?

Answer 1

[Faber Estello]

как вариант, поддержка
caniuse.com/#search=background-size
caniuse.com/#search=svg

можно попробовать в процентах background-size: 100% 100%;

Comments

[frontender]

не помогло в процентах :(
как еще можно решить?

[Faber Estello]

frontender: в .png пробовали? Если и в png формате не растягивает, значит проблема именно background-size, решение ... использовать изображение и что-то мудрить на абсолютах (если очень нужно).
Иначе проблема в svg! Решение искать по svg.
Возможно у yoksel что-то найдете css.yoksel.ru/svg-fallback-in-ie9-and-androids2x

[frontender]

проблема в svg, спасибо за помощь. щас буду разбираться

Answer 2

[Ivanq]

IE не поддерживает background-size: cover / contain

Comments

[frontender]

поддерживает, но не для svg как выяснилось