html – CSS过渡期间SVG闪烁

2023年10月5日 270次阅读

我一直在开发一个新的公司网站,为了确保它在视网膜上看起来很好,我一直在使用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>

最佳答案 好吧,通过使用SVG,你不能在两个图标之间淡入淡出.但是,您仍然可以只设置其中一个并使用Fill属性.

尝试将图标与文本分开或在div中包含图标,然后为Fill属性设置动画.

例：

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