CSS 过渡期间 SVG 闪烁

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