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