动画在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上都有错误。 –

回答

相关问题