如何淡入和淡出svg的颜色答案

【问题标题】：How to fade in and out color of svg如何淡入和淡出svg的颜色
【发布时间】：2015-12-09 23:32:51
【问题描述】：

我希望一个 svg 对象从颜色“A”渐变为颜色“B”，然后无限期地变回颜色“A”。

到目前为止，我使用的成功有限

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

但这不允许我淡出颜色“A”。

任何帮助将不胜感激。

【问题讨论】：

标签： css animation svg

【解决方案1】：

您可以使用自定义 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/

【讨论】：

感谢您的回复，这个也得试试。对我来说是了解 css 动画中关键帧的好机会。

【解决方案2】：

使用values 属性代替from 和to。

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

【讨论】：