如何淡入和淡出SVG的颜色 [英] How to fade in and out color of svg

问题描述

我希望一个svg对象从颜色'A'淡出为颜色'B'，然后无限期地恢复为颜色'A'。

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" />

但是，这不允许我退回到颜色'A'。

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

任何帮助将不胜感激。

推荐答案

使用值属性，而不是从和到。

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

这篇关于如何淡入和淡出SVG的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！