请问一下，为什么动态创建animate会失效，没有动画效果
原本打算用定时器setinterval循环调用的，但系发现创建出来的标签没有动画效果，不知道是什么原因
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<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, 'animate')
let x = randomNum(1, 1000)
let time = randomNum(1, 3)
// 生成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)
// 插入动画标签
rain.innerHTML = `<animate attributeType="XML" attributeName="y" from="0" to="1000" dur="${time}s"></animate>`
// 时间到达后删除生成的雨滴
let timer1 = setTimeout(() => {
box.removeChild(document.querySelector("#a" + id))
}, time * 1000 - 200);
}
// 定时器调用雨滴函数
let timer2 = setInterval(() => {
createRain()
}, 100)
//单独调用雨滴函数
// createRain()
// var startTime = Date.now()
// var endTime=0
// setInterval(function () {
// endTime = Date.now()
// // console.log(startTime);
// // myTimeFn()
// }, 200)
// function myTimeFn(params) {
// // let endTime = Date.now()
// // console.log(1);
// // if ((endTime - startTime)>200 ) {
// // startTime = endTime
// // createRain()
// // console.log(2);
// // myTimeFn()
// // }else{
// // console.log(3);
// // myTimeFn()
// // return
// // }
// setTimeout(() => {
// createRain()
// myTimeFn()
// }, 200);
// }
// myTimeFn()
</script>
</body>
</html>
