How to fade in and out color of svg

Question

I want an svg object to fade from color 'A' to color 'B' then back to color 'A' indefinitely.

Thus far I have had limited success using

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

But this doesn't allow me to fade back to color 'A'.

Any help would be appreciated.

Answer 1

You could use a custom css animation to achieve this:

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

Just apply the animation property to whatever element you want to have the fill change http://jsfiddle.net/re8tn1o3/

Answer 2

Use the values attribute instead of from and to.

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