<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
text-align: center;
}
svg{
background: #ddd;
}
</style>
</head>
<body>
<h1>svg绘制多个圆形</h1>
<!--<svg width="500" height="400" id="s3" cx="0" cy="20" fill="#aaa"></svg>-->
<svg width="500" height="400" id="s3"></svg>
<script>
for(var i= 0;i<30;i++){
var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
c.setAttribute('r', rn(20,100));//随机半径
c.setAttribute('cx', rn(0,500));//随机圆心 X坐标
c.setAttribute('cy', rn(0,400));//随机圆心 Y坐标
c.setAttribute('fill', rc(0,255));//填充色
c.setAttribute('fill-opacity', Math.random()); //填充透明度
s3.appendChild(c);
c.onclick = function(){
var that = this;//保留this
that.onclick = null;//放置点击两次,取消事件监听
//标准小技巧：当前圆不能被再次点击两次
var timer = setInterval(function(){
var r = that.getAttribute("r");
r*=1.05;//增长5%
that.setAttribute("r",r);
var p = that.getAttribute("fill-opacity");
p *=0.9;//减少10%
that.setAttribute("fill-opacity",p);
if(p<0.001){
clearInterval(timer);
timer=null;
s3.removeChild(that);//删除当前元素
}
},50)
}
}
//random number ,返回指定范围的随机数
function rn(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
//random color，返回指定范围内的随机颜色：rgb是0~255
function rc(min, max) {
var r = rn(min, max);
var g = rn(min, max);
var b = rn(min, max);
return `rgb(${r}, ${g}, ${b})`;
}
</script>
</body>
</html>
