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

最新推荐文章于 2022-09-21 10:47:32 发布

莫纷飞

最新推荐文章于 2022-09-21 10:47:32 发布

阅读量2.2k

点赞数

分类专栏：干货小技巧文章标签：动画 svg 多值

本文链接：https://blog.csdn.net/NEWSEKAES/article/details/52547094

版权

干货小技巧专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>