在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閃爍

回答

相關問題