如何淡入和淡出svg的颜色

Posted 2023-03-06

【中文标题】如何淡入和淡出svg的颜色

【英文标题】：How to fade in and out color of svg

【发布时间】：2015-12-09 23:32:51

【问题描述】：

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

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

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

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

任何帮助将不胜感激。

【参考方案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  >
    <animate attributeName="fill" values="red;blue;red" dur="10s" repeatCount="indefinite" />
  </rect>
</svg>