写一个svg 圆颜色渐变动画
时间: 2023-10-11 15:10:37 浏览: 53
好的,以下是一个简单的SVG圆形颜色渐变动画代码示例:
```html
<svg width="200" height="200">
<defs>
<radialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color: #ff00ff;stop-opacity: 1" />
<stop offset="100%" style="stop-color: #00ffff;stop-opacity: 1" />
</radialGradient>
</defs>
<circle cx="100" cy="100" r="50" fill="url(#grad)">
<animate attributeName="fill" values="#ff00ff;#00ffff;#ff00ff" dur="5s" repeatCount="indefinite"></animate>
</circle>
</svg>
```
在这个示例中,使用`<radialGradient>`定义了一个径向渐变,渐变从紫色到青色。然后使用`<circle>`元素创建一个圆形,填充颜色使用`fill="url(#grad)"`指定为径向渐变。最后,使用`<animate>`元素创建一个颜色动画,让圆形的填充颜色在紫色和青色之间循环播放,时长为5秒,重复次数为无限次。
运行该代码,会在浏览器中显示一个带有颜色渐变动画的圆形。