svg用animate实现简单动画效果

编程语言

843

svg用animate实现简单动画效果

svg中可以使用animate标签实现动画效果。

就是在相应的形状标签内加入animate标签，其中若干属性如下：


attributeName 目标属性名称
from 起始值
to 结束值
dur 持续时间
repeatCount 次数|indefinite，动画时间将发生几次，indefinite表示无限次。

一个简单示例效果，颜色在3秒内从steelblue渐变到pink：


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
    <rect x="0" y="0" width="200" height="200" fill="steelblue">
        <animate attributeName="fill" from="steelblue" to="pink" dur="3" repeatCount="1"></animate>
    </rect>
</svg>

运行效果：

svg用animate实现简单动画效果

如果要多个动画效果，可以使用多个animate标签。


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
    <rect x="0" y="0" width="200" height="200" fill="steelblue">
        <animate attributeName="fill" from="steelblue" to="pink" dur="3" repeatCount="1"></animate>
        <animate attributeName="width" from="200" to="10" dur="3" repeatCount="1"></animate>
        <animate attributeName="height" from="200" to="10" dur="3" repeatCount="1"></animate>
    </rect>
</svg>

运行效果：

svg用animate实现简单动画效果

少

少年哟

你会哭着笑，笑着哭，是因为你的心，早已超越了自己啊。

发布数

关注者

9063

累计阅读

svg用animate实现简单动画效果 4年前

热门教程文档