在CSS转换期间SVG闪烁

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

当过渡开始时，图标消失，一旦完成，新图标就会出现在它的位置。但是，如果我使用PNG，它应该可以正常工作。这是浏览器限制吗？或者我没有做我应该做的事情？无论我尝试过哪些背景设置，我都无法顺利淡化。

与徽标（PNG）相比，请观看手机图标（SVG）。

enter image description here

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>

来源

2014-09-30 Devin

不能转变与CSS（还）的背景图像，因为它没有中间值。这是一个或另一个...没有中途等 – 2014-09-30 19:00:44

可以请你提供你的HTML。 – Enumy 2014-09-30 19:00:48

添加了元素的HTML。 Paulie_D，我已经用我的标志完成了PNG。 – Devin 2014-09-30 19:02:56

好，使用SVG你不能两个图标之间褪色。但是，您仍然可以只设置其中一个，并使用Fill属性。

尝试将图标从文本中分离或在div中包含图标，然后替换为Fill属性的动画。

实施例：

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

来源

2014-09-30 19:21:04 Enumy

那么就把它作为一个图像链接到一个IMG标签？ – Devin 2014-09-30 19:25:32

使用' Enumy 2014-09-30 19:28:18

@Devin我在tho之前从未尝试过使用'svg'图片的''标签，但我认为它的工作原理是。 – Enumy 2014-09-30 19:31:02

在CSS转换期间SVG闪烁

回答

相关问题