如何淡入淡出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/