svg创建下雨效果，用定时器setInterval调用雨滴函数时，雨滴动画会不运行，why？？

Question

问题描述

svg创建下雨效果，用定时器setInterval调用雨滴函数时，雨滴动画会不运行，单独和多次单独调用雨滴函数可以运行动画，求解

相关代码

<svg width='100%' height='100%' id='box'>
    <defs>
        <linearGradient id="rainLinear" x1='0' y1='0' x2='0' y2='1'>
            <stop offSet='0' stop-color='white'></stop>
            <stop offSet='1' stop-color='blue'></stop>
        </linearGradient>
    </defs>
    <path id='rainPath' d='M 10 10 10 500' stroke='red'></path>
    <rect x='100' y='0' width='5' height='20' fill='url(#rainLinear)'>
        <animateMotion path='M 10 10 10 500' dur='5s'>
        </animateMotion>
    </rect>

</svg>
<script>
    var SVG_NS = "http://www.w3.org/2000/svg"
    var XLINK_NS = "http://www.w3.org/1999/xlink"
    var box = document.querySelector('#box')
    let idNum = 0
    // 生成随机数
    function randomNum(min, max) {
        return parseInt(min + (max - min) * Math.random())
    }
    // 雨滴函数
    function createRain() {
        // 创建雨滴和动画
        let rain = document.createElementNS(SVG_NS, 'rect')
        let rainAnimate = document.createElementNS(SVG_NS, 'animateMotion')
        let x = randomNum(1, 1000)
        let time = randomNum(1, 10)
        // 生成id
        let id = idNum
        idNum++

        // 插入雨滴和动画
        box.appendChild(rain)
        rain.appendChild(rainAnimate)

        // 设置雨滴属性
        rain.setAttribute('x', x)
        rain.setAttribute('y', 0)
        rain.setAttribute('width', 5)
        rain.setAttribute('height', 20)
        rain.setAttribute('fill', 'url(#rainLinear)')
        rain.setAttribute('id', "a" + id)

        // 设置动画属性
        rainAnimate.setAttribute('path', 'M 10 10 10 500')
        rainAnimate.setAttribute('begin', 0)
        rainAnimate.setAttribute('dur', time + "s")

        // 时间到达后删除生成的雨滴
        setTimeout(() => {
            box.removeChild(document.querySelector("#a" + id))
        }, time * 1000 - 200);
    }
    // 定时器调用雨滴函数
    setInterval(() => {
        createRain()
    }, 500)
    //单独调用雨滴函数
    createRain()
</script>

Answer 1

rainAnimate.setAttribute('begin', idNum + 's')