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

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

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

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

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

其实还有一个属性叫做valuesvalues的值是由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后缀后可看到效果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值