CSS 전환 중에 SVG가 깜박입니다.

Question

저는 새로운 회사 웹 사이트를 개발하여 망막이 잘 보이도록 SVG 아이콘을 사용하고 있습니다. 그러나 SVG 인 배경 이미지에 CSS 전환을 적용하려고 할 때 약간의 문제가 있습니다.

전환이 시작되면 아이콘이 사라지고 완료되면 새로운 아이콘이 나타납니다. 그러나 PNG를 사용하면 정상적으로 작동합니다. 이것은 브라우저의 제한 사항입니까? 아니면 내가해야 할 일을하고 있지 않습니까? 어떤 배경 설정을 시도했는지에 관계없이 원활하게 사라지지 않습니다.

로고 (PNG)와 비교하여 전화 아이콘 (SVG)을보십시오. 요소의

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; 
}