Проблема с css background-size в svg с IE11

Question

У меня есть изображение SVG с CSS следующим образом:

background: url("/assets/img/image1.svg") no-repeat center top scroll;
background-size: 100% auto

Стилизация отлично работает во всех других браузерах, кроме Internet Explorer 11 . Я провел некоторое расследование, в результате которого мы должны добавить height и width в SVG.

Мой вопрос: если мы добавим эти атрибуты height и width, будет ли изображение по-прежнему масштабируемым и отзывчивым во всех других браузерах и устройствах? Спасибо!

Answer 1

«Если мы добавим эти атрибуты высоты и ширины, будет ли изображение по-прежнему масштабируемым и отзывчивым во всех других браузерах и устройствах?»

Да! Изображение будет масштабироваться в зависимости от предоставленного вами CSS. Если вы посмотрите на источник SVG, который я использовал https://s.cdpn.io/3/kiwi.svg, вы увидите, что width="612px" и height="502.174px", но с установленным background-size: 100% auto;, вы увидите, что SVG имеет ту же ширину элемента (50 пикселей) и высота является динамической (или автоматической).

div {
    height:100px;
    width:50px;
    
    
    /* the only change below is the url source */
    background: url("https://s.cdpn.io/3/kiwi.svg") no-repeat center top scroll; 
    background-size: 100% auto;
}

<div></div>

Answer 2

Я думаю, что это свойство нарушает его в IE background: url("/assets/img/image1.svg") no-repeat center top scroll; Попробуйте поместить свойства по отдельности так:

background-image: url('/assets/img/image1.svg');
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
background-size: 100% auto;

пс.background-attachment: scroll Я не уверен, действительно ли вам это нужно.