如何淡入淡出svg的颜色

Question

我想要一个svg对象从颜色'A'淡入颜色'B'，然后无限期地回到颜色'A'。

到目前为止，我已经使用

<animate attributeName="fill" from="colorA" to="colorB" dur="10s" repeatCount="indefinite" /> 

有限的成功，但是，这并不让我渐退色“A”。

任何帮助，将不胜感激。

Answer 1

使用values属性，而不是from任何元素和to。

<svg> 
 
    <rect width="100%" height="100%"> 
 
    <animate attributeName="fill" values="red;blue;red" dur="10s" repeatCount="indefinite" /> 
 
    </rect> 
 
</svg>

Answer 2

您可以使用自定义的CSS动画来实现这一点：

@keyframes colorChange { 
    0%{fill:#ff0000} 
    50%{fill:#000} 
    100%{fill: #ff0000} 
} 
.box { 
    width:200px; 
    height:200px; 
    animation: colorChange 3s infinite; 
} 

只是应用animation属性要具备补变化 http://jsfiddle.net/re8tn1o3/