javascript制作svg进度球实例分享

class svgPercent { constructor({y1,y2,group,text}) { this.y1 = y1 ? y1 : 0; this.y2 = y2 ? y2 : 0; this.group = group; this.xmlns = 'http://www.w3.org/2000/svg'; this.textBox = text; this.currentPercentText = '0%'; //初始 进度球 this.init(); } init() { //1.获取路径数据 this.getSvgPathData(this.y1,this.y2); //2.根据数据绘制路径 this.createPath(); //3.设置百分比 this.setPercentText(); //4.模拟进度增长的情况 this.changePathShape(); } initChangeShape() { //1.获取路径数据 this.getSvgPathData(this.y1,this.y2); //2. 设置路径形状改变 this.setPaths(); } //获取路径数据 getSvgPathData(y,y2) { this.d1=`M327.898,${225.235+y}c3.086,${-11.496+y},4.74,${-11.496+y},4.74,${-36.167+y}c0,${0+y},-31.712,${-28.628+y},-140.67,${-2+y}c-120.71,${29.5+y},-125.21,${11+y}-140.67,${0.35+y}c0.032,${13.105+y},1.862,${25.787+y},5.247,${37.817+y}h-90.043 v390 h467 v-390 H327.898 z`; this.a1=`M 327.898,${225.235+y}c 3.086,${-11.496+y},4.74,${-23.611+y},4.74,${-36.167+y}c 0,${0+y},-23.971,${54.165+y},-140.67,${-2+y}c-111.97,${-53.888+y}-135.301,${-9.835+y}-140.67,${0.35+y}c 0.032,${13.105+y},1.862,${25.787+y},5.247,${37.817+y}h-90.043 v390 h 467 v-390 H 327.898 z`; this.d2 = `M 327.898,${237.031+y2}c 3.086,${-14.234+y2},4.74,${-29.236+y2},4.74,${-44.785+y2}c 0,${0+y2}-30.305,${36.653+y2}-140.67,${-2.477+y2}c-118.866,${-42.144+y2}-134.529,${-9.191+y2}-140.67,${0.434+y2}c 0.032,${16.229+y2},1.862,${31.933+y2},5.247,${46.828+y2}h-90.043 v 405.865 h 467 V ${237.031+y2} H 327.898 z`; this.a2 = `M 327.898,${237.031+y2}c 3.086,${-14.234+y2},4.74,${-29.236+y2},4.74,${-44.785+y2}c 0,${0+y2}-56.638,${-36.347+y2}-140.67,${-2.477+y2}C 74.997,${236.916+y2},63,${199.232+y2},51.299,${190.203+y2}c 0.032,${16.229+y2},1.862,${31.933+y2},5.247,${46.828+y2}h-90.043 v 405.865 h 467 V ${237.031+y2} H 327.898 z`; } //创建path路径 createPath(group) { this.pathOne = document.createElementNS(this.xmlns,'path'); this.animate = document.createElementNS(this.xmlns,'animate'); this.pathOne.setAttribute('style','fill:url(#SVGID_3_)'); this.pathOne.setAttribute('d',this.d1); this.animate.setAttribute('dur','5s'); this.animate.setAttribute('attributeName','d'); this.animate.setAttribute('attributeType','XML'); this.animate.setAttribute('repeatCount','indefinite'); this.animate.setAttribute('keyTimes','0;0.55;1'); this.animate.setAttribute('values',this.d1+';'+this.a1+';'+this.d1); this.pathOne.appendChild(this.animate); this.group.appendChild(this.pathOne); this.pathTwo = document.createElementNS(this.xmlns,'path'); this.animate2 = document.createElementNS(this.xmlns,'animate'); this.pathTwo.setAttribute('style','fill:url(#SVGID_3_)'); this.pathTwo.setAttribute('d',this.d2); this.animate2.setAttribute('dur','5s'); this.animate2.setAttribute('attributeName','d'); this.animate2.setAttribute('attributeType','XML'); this.animate2.setAttribute('repeatCount','indefinite'); this.animate2.setAttribute('keyTimes','0;0.55;1'); this.animate2.setAttribute('values',this.d2+';'+this.a2+';'+this.d2); this.pathTwo.appendChild(this.animate2); this.group.appendChild(this.pathTwo); } //设置path路径 setPaths() { this.pathOne.setAttribute('d',this.d1); this.pathTwo.setAttribute('d',this.d2); this.animate.setAttribute('values',this.d1+';'+this.a1+';'+this.d1); this.animate2.setAttribute('values',this.d2+';'+this.a2+';'+this.d2); } //设置百分比文字 setPercentText(val) { let vals = val ? val : this.currentPercentText; this.textBox.textContent = vals; } //改变路径形状 changePathShape() { let dis = 0.3; let percent = ''; let p = ''; let start = this.y1; let end = -50; let This = this; function step() { This.y1 -= dis; This.y2 -= dis; This.initChangeShape(); percent = parseInt((Math.abs(This.y1 - start) / Math.abs(end-start))*100); p = percent + '%'; This.setPercentText(p); if(percent < 50){ requestAnimationFrame(step); } } requestAnimationFrame(step); } } // 初始化配置参数调用 let obj = { y1: 50, y2: 50, group: document.querySelector('#pathGroup'), text: document.querySelector('.perText') } new svgPercent(obj);