每日一练SVG点击放大圆的效果

点击画布中任意位置，就会出现圆，然后出现放大、渐变效果，直到消失;
圆的背景颜色随机。

<svg id="svg" width="500px" height="500px" style="background-color: #F5F5F5;"></svg>

<script>
	let svg = document.getElementById("svg");
			svg.onclick = function(event){
				let e = event || window.event;
				let circle = document.createElementNS("http://www.w3.org/2000/svg","circle");
				circle.setAttribute("cx",e.offsetX);
				circle.setAttribute("cy",e.offsetY);
				circle.setAttribute("r",10);
				circle.setAttribute("fill",randomColor());
				circle.setAttribute("opacity",1)
				svg.appendChild(circle);
				let t = setInterval(function(){
					var r = parseInt(circle.getAttribute("r"));
						r++;
						circle.setAttribute("r",r);
					let opacity = parseFloat(circle.getAttribute("opacity"));
					    opacity -= 0.005;
						circle.setAttribute("opacity",opacity);
					if(opacity <= 0 ){
						//circle.parentNode.removeChild(circle);
						clearInterval(t);
					}
				},10);
			}
			
			//随机颜色
			function randomColor(){
				var r = Math.floor(Math.random()*256),
					g = Math.floor(Math.random()*256),
					b = Math.floor(Math.random()*256);
				return "rgb("+r+","+g+","+b+")";
			}
			console.log(randomColor());
</script>