Как угасать цвет и цвет svg

Question

Я хочу, чтобы объект svg исчезал от цвета «А» до цвета «В», а затем возвращался к цвету «А» на неопределенный срок.

До сих пор я имел ограниченный успех, используя

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

Но это не позволяет мне исчезать обратно цвета «А».

Любая помощь будет оценена по достоинству.

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/