html - SVG 在 CSS 转换期间闪烁

Question

我一直在开发一个新的公司网站，为了确保它在视网膜上看起来不错，我一直在使用 SVG 图标，这是我以前从未真正做过的事情。但是，在尝试将 CSS 过渡应用于 SVG 背景图像时，我遇到了一些问题。

当转换开始时，图标消失，一旦完成，新图标出现在它的位置。但是，如果我使用 PNG，它可以正常工作。这是浏览器限制吗？或者我没有做我应该做的事？无论我尝试过什么背景设置，我都无法让它平滑地淡出。

比较电话图标 (SVG) 与 Logo (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;
}