動畫在Chrome

不工作我創建了一套SVG圖標，我想一些動畫使用CSS元素。示例代碼適用於IE，Firefox和Safari，但拒絕在Chrome中生成動畫。如果我從circle移動動畫類的use元素Chrome將動畫圖標全但這不是我所需要的效果。動畫在Chrome

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

<style> 
.drop { 
    animation: dropFrames linear 1s; 
    animation-iteration-count: infinite; 
} 

@keyframes dropFrames{ 
    0% { opacity:1; } 
    100% { opacity:0; } 
} 
</style> 

<svg style="display:none" > 
    <defs> 

    <symbol id="icon" viewBox="0 0 200 200"> 
     <circle cx="50" cy="50" r="50" fill="grey"/> 
     <circle cx="50" cy="150" r="20" fill="blue" class="drop"/> 
    </symbol> 

    </defs> 
</svg> 

<svg ><use xlink:href="#icon" /></svg> 

</body> 
</html>

我試過用-webkit-前綴，但它沒有幫助。

來源

2015-11-05 Unstableair

AFAIK，你不能用CSS訪問<use>元件的內部零件。

一種替代它打破「圖標」成單獨的碼元，並然後合併2個use元件成一個單一的SVG。

.drop { 
 
    animation: dropFrames linear 1s; 
 
    animation-iteration-count: infinite; 
 
} 
 
@keyframes dropFrames { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
}

<svg style="display:none"> 
 
    <defs> 
 

 
    <symbol id="icon-top" viewBox="0 0 200 200"> 
 
     <circle cx="50" cy="50" r="50" fill="grey" /> 
 
    </symbol> 
 

 
    <symbol id="icon-bottom" viewBox="0 0 200 200"> 
 
     <circle cx="50" cy="150" r="20" fill="blue" /> 
 
    </symbol> 
 

 
    </defs> 
 
</svg> 
 

 
<svg> 
 
    <use xlink:href="#icon-top" /> 
 
    <use xlink:href="#icon-bottom" class="drop" /> 
 
</svg>

來源

2015-11-05 15:24:17

這是一個SVG限制或Chrome？這是令人沮喪的是我能夠動畫''在FireFox，IE和Safari但不是鍍鉻的元素。 – Unstableair

我的理解是，這是一個SVG的限制......但它可能是我的信息是過時的或者就像你說的，可能是瀏覽器的錯誤......或者他們還沒有cahught了沒有。 –

這應該工作，所有使用實例應該動畫。 ''雖然在大多數UA上都有錯誤。 –

回答

相關問題