svg實現 圓形 點擊擴大、消失
阿新 • • 發佈：2017-05-26
move doctype tns creat src reat 每次 浮點 func
效果：
代碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } svg { background: #ddd; } </style> </head> <body> <h3>SVG繪圖——圓形</h3> <svg id="svg19" width="500" height="400"> </svg> <script> for(var i=0; i<20; 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));//圓形Yc.setAttribute(‘fill‘, rc(0,256));//填充色 c.setAttribute(‘fill-opacity‘, Math.random()); //填充透明度 svg19.appendChild(c); //為每個圓形添加事件綁定 c.onclick = function(){ var that = this; //保留事件源的引用 that.onclick = null; //讓圓形只能點一次 var t = setInterval(function(){//修改圓形半徑，每次變大5% var r = that.getAttribute(‘r‘); r *= 1.05; //隱式的浮點數解析 that.setAttribute(‘r‘,r); //修改圓形透明度，每次減小5% var p = that.getAttribute(‘fill-opacity‘); p *= 0.95; that.setAttribute(‘fill-opacity‘, p); if(p<=0.001){ //已經透明幾乎看不見了 clearInterval(t); svg19.removeChild(that);//從DOM上刪除圓形 } },30); } } //random number，返回指定範圍內的隨機整數 function rn(min, max) { return Math.floor(Math.random() * (max - min) + min); } //random color，返回指定範圍內的隨機顏色 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>
svg實現 圓形 點擊擴大、消失