首先给画布一个背景颜色
<style>
svg{
background-color: aqua;
}
</style>
给svg标签设定宽高,注意宽高不能写在style里面
<svg width='800' height='800'></svg>
<script>
var svg = document.querySelector('svg')
function opp(max,min){
return Math.ceil(Math.random()*(max-min)+min)
}
function opp1(max,min){
return `rgb(${opp(max,min)},${opp(max,min)},${opp(max,min)})`
}
svg.onclick = function(e){
setInterval(function(){
var circle = document.createElementNS('http://www.w3.org/2000/svg','circle')
circle.setAttribute('cx',e.offsetX)
circle.setAttribute('cy',e.offsetY)
circle.setAttribute('r',opp(10,300))
circle.setAttribute('fill',opp1(0,255))
circle.setAttribute('fill-opacity',Math.random())
svg.appendChild(circle)
},50)
}
</script>