SVG вспыхивает во время перехода CSS

Question

Я разрабатываю новый веб-сайт компании, и чтобы он выглядел хорошо на сетчатке, я использовал значки SVG, чего я никогда не делал раньше. Однако у меня возникает небольшая проблема при попытке применить переход CSS к фоновому изображению, которое является SVG.

Когда переход начинается, значок исчезает, и как только он заканчивается, на его месте появляется новый значок. Однако, если я использую PNG, он работает так, как должен. Это ограничение браузера? Или я ничего не делаю? Независимо от того, какие настройки фона я пробовал, я не могу заставить его постепенно исчезать.

Смотрите значок телефона (SVG) по сравнению с логотипом (PNG).

CSS элемента:

nav#header-nav div#phone-number { 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 300; 
    font-size: 20px; 
    height: 50px; 
    line-height: 50px; 
    float: left; 
    background-image: url(//cdn.shopify.com/s/files/1/0554/1957/t/4/assets/phone-white.svg?19873); 
    background-repeat: no-repeat; 
    background-position: left center; 
    background-size: 20px; 
    padding-left: 28px; 
    color: rgb(255, 255, 255); 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 

nav#header-nav.small div#phone-number { 
    color: rgb(0, 0, 0); 
    background-image: url(//cdn.shopify.com/s/files/1/0554/1957/t/4/assets/phone.svg?19873); 
} 

HTML элемента:

<div id="phone-number">(555) 867-5309</div> 

Answer 1

Ну, с помощью SVG вы не можете исчезать между двумя значками. Однако вы можете установить только один из них и использовать свойство Fill.

Попробуйте отделить значок от текста или включить значок внутри поля div, а затем вместо этого выполните анимацию объекта Fill.

Пример:

#icon{ 
    transition: fill 0.5s ease in-out; 
    fill:black; 
} 
#phone-number:hover #icon{ 
    fill:white; 
}