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

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>