Совместимость с браузером с SVG-фоном

Я работаю над приложением, поддерживающим IE 10 и Chrome. Для фоновых изображений мы используем svg sprite. Если нам нужно размещать значки, мы определили общий класс для изображения, а также определенный класс на основе значка.Совместимость с браузером с SVG-фоном

Как только мы создадим приложение, мы обнаружили, что позиционирование в браузере Chrome очень удобно, и для IE нам нужно написать отдельное исправление css на основе браузера. HTML

<ul> 
<li><a class="pico menu href="javascript:void(0)">Home</a></li> 
</ul>

Мой CSS выглядит

.pico:after{ 
    background:('sprite.svg') 0 0 no-repeat; 
    background-size: 280px 660px; 
    position:absolute; 
    content:"" 
} 


.pico.menu:after{ 
    background-position:-106px 6px; 
} 

.ie .pico.menu:after{ 
    background-position:-110px 6px; 
}

Есть в любом случае, чтобы иметь общие стили для IE и Chrome?. Или поведение браузеров по умолчанию.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="300px" height="650px" viewBox="561 165 246 580" enable-background="new 561 165 246 580" xml:space="preserve"> 
<g> 
    <g> 
     <polygon fill="#F47621" points="580.3,230 585.5,235.2 590.8,230 589.8,229 585.5,233.1 581.3,229   "/> 
    </g> 
    <g> 
     <polygon fill="#F47621" points="580.3,225.5 585.5,230.7 590.8,225.5 589.8,224.6 585.5,228.8 581.3,224.6   "/> 
    </g> 
</g> 
</svg>

источник

2015-05-16 Thillai Narayanan

Что именно происходит на IE? Возможно, вы можете сделать фрагмент кода или добавить изображение. Кроме того, содержание sprite.svg может быть важным. Вы можете связать его или, по крайней мере, показать нам первый тег '

прилагается образец svg @PaulLeBeau –

Рабочий пример был бы полезен. Без HTML и остальной CSS для «.pico» мы не можем сказать, что происходит не так. –

Здесь я очистил часть кода. Не используйте внешний url для своих изображений, конечно.

Протестировано в chrome и IE 11 и IE 10. Оба изображения будут отображаться правильно.

.pico::after { 
 
    background: url(http://imgh.us/test_55.svg) 0 0 no-repeat; 
 
    background-size: 280px 660px; 
 
    position: absolute; 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 20px; 
 
} 
 
.pico.menu::after { 
 
    background-position: -10px -65px; 
 
} 
 
svg { 
 
    border: 5px solid black; 
 
}

<ul> 
 
    <li><a class="pico menu" href="javascript:void(0)">Home</a> 
 
    </li> 
 
</ul> 
 

 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="650px" viewBox="561 165 246 580" enable-background="new 561 165 246 580" xml:space="preserve"> 
 
    <polygon fill="#F47621" points="580.3,230 585.5,235.2 590.8,230 589.8,229 585.5,233.1 581.3,229   " /> 
 
    <polygon fill="#F47621" points="580.3,225.5 585.5,230.7 590.8,225.5 589.8,224.6 585.5,228.8 581.3,224.6   " /> 
 
</svg>

источник

2015-05-18 19:00:31 Persijn

Совместимость с браузером с SVG-фоном

ответ

Смежные вопросы