svg創(chuàng)建下雨效果，用定時(shí)器setInterval調(diào)用雨滴函數(shù)時(shí)，雨滴動(dòng)畫(huà)會(huì)不運(yùn)行，why？？

問(wèn)題描述

svg創(chuàng)建下雨效果，用定時(shí)器setInterval調(diào)用雨滴函數(shù)時(shí)，雨滴動(dòng)畫(huà)會(huì)不運(yùn)行，單獨(dú)和多次單獨(dú)調(diào)用雨滴函數(shù)可以運(yùn)行動(dòng)畫(huà)，求解

相關(guān)代碼

<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
    // 生成隨機(jī)數(shù)
    function randomNum(min, max) {
        return parseInt(min + (max - min) * Math.random())
    }
    // 雨滴函數(shù)
    function createRain() {
        // 創(chuàng)建雨滴和動(dòng)畫(huà)
        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++

        // 插入雨滴和動(dòng)畫(huà)
        box.appendChild(rain)
        rain.appendChild(rainAnimate)

        // 設(shè)置雨滴屬性
        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)

        // 設(shè)置動(dòng)畫(huà)屬性
        rainAnimate.setAttribute('path', 'M 10 10 10 500')
        rainAnimate.setAttribute('begin', 0)
        rainAnimate.setAttribute('dur', time + "s")

        // 時(shí)間到達(dá)后刪除生成的雨滴
        setTimeout(() => {
            box.removeChild(document.querySelector("#a" + id))
        }, time * 1000 - 200);
    }
    // 定時(shí)器調(diào)用雨滴函數(shù)
    setInterval(() => {
        createRain()
    }, 500)
    //單獨(dú)調(diào)用雨滴函數(shù)
    createRain()
</script>