如何使SVG内的animate标签属性多值变化

来源：互联网发布：战舰世界腓特烈数据编辑：程序博客网时间：2024/05/19 02:23

animate标签多值变化(非两值)

今天在工作的时候内，想要实现一个circle的动画效果，效果的描述是这样的：

园的半径从5，扩大到10，再从10减小到5，然后许仙循环

但是在实际操作之中，却发现，规定属性值得form，to，by注定只能在两个值之间变化。（from和to的值是绝对的，by的值是相对的）。
那么如何多值变化呢？

其实还有一个属性叫做values。values的值是由3值及以上的数值构成，并由 ; 隔开。下面看代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><svg width="500" height="500" viewBox="0 0 40 40">    <circle cx="20" cy="20" fill="blue">        <animate attributeName="r" values="5;10;5" dur="1s"  repeatCount="indefinite"></animate>    </circle></svg></body></html>

将代码复制并做html后缀后可看到效果。

0 0