CSS过渡期间SVG闪烁

Question

我一直在开发一个新的公司网站，为了确保它在视网膜上看起来很好，我一直在使用SVG图标，这是我以前从未真正做过的事情。但是，在尝试将CS​​S转换应用于背景图像（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;
}