svg.min.js

class SVG{constructor(t,e,s=document.documentElement.clientWidth,i=document.documentElement.clientHeight){if(!isNaN(this.name))return console.warn("The name of the SVG must be a string"),!1;try{this.container=document.querySelector(e)}catch(t){return console.warn("container not found"),!1}this.width=s,this.height=i,this.name=t,this.type="svg",this.index=0,this.xmlns="http://www.w3.org/2000/svg",this.data=[],this.defaultColor="none";let a=document.createElementNS(this.xmlns,"svg");this.container.appendChild(a),a.setAttribute("class",t),Object.assign(a.style,{width:s+"px",height:i+"px",cursor:"default"})}draw(){this.reset();for(let t in this.data){let e=this.data[t],s=e.obj;switch(document.getElementsByClassName(this.name)[0].appendChild(s),s.setAttribute("class","s"+e.id),setAttributes(s,{stroke:e.strokeColor,"stroke-width":e.strokeWidth,fill:e.background}),e.type){case"line":setAttributes(s,{x1:e.coord[0],y1:e.coord[1],x2:e.coord[2],y2:e.coord[3],stroke:e.color,"stroke-width":e.size});break;case"polyline":s.setAttributeNS(null,"points",e.coord);break;case"circle":setAttributes(s,{cx:e.x,cy:e.y,r:e.r});break;case"ellipse":setAttributes(s,{x:e.x,y:e.y,rx:e.rx,ry:e.ry});break;case"path":s.setAttributeNS(null,"d",e.d);break;case"text":setAttributes(s,{x:e.x,y:e.y,fill:e.fill,"font-size":e.fontSize}),s.appendChild(document.createTextNode(e.text));break;case"image":setAttributes(s,{x:e.x,y:e.y,width:e.width,height:e.height,href:e.imageUrl})}this.data[t].obj=s}document.getElementsByClassName(this.name)[0].addEventListener("selectstart",function(t){t.preventDefault()})}reset(){this.name&&(document.getElementsByClassName(this.name)[0].innerHTML="")}line(t,e,s,i,a=this.defaultColor,l=1){return this.data.push({type:"line",coord:[t,e,s,i],color:a,size:l,id:this.index++,obj:document.createElementNS(this.xmlns,"line")}),this.data[this.index-1]}polyline(t,e=this.defaultColor,s=this.defaultColor,i=1){if("object"==typeof t)!0===t[t.length-1]&&(t[t.length-1]=t[0]),t=this.createPolyline(t);else{let e=t.split(" ")[0];t=t.replace(/z$/," "+e)}return this.data.push({type:"polyline",coord:t,background:e,strokeColor:s,strokeWidth:i,id:this.index++,obj:document.createElementNS(this.xmlns,"polyline")}),this.data[this.index-1]}circle(t,e,s,i=this.defaultColor,a=this.defaultColor,l=1){return this.data.push({type:"circle",x:t,y:e,r:s,background:i,strokeColor:a,strokeWidth:l,id:this.index++,obj:document.createElementNS(this.xmlns,"circle")}),this.data[this.index-1]}ellipse(t,e,s,i,a=this.defaultColor,l=this.defaultColor,o=this.strokeWidth){return this.data.push({type:"ellipse",x:t,y:e,rx:s,ry:i,background:a,strokeColor:l,strokeWidth:o,id:this.index++,obj:document.createElementNS(this.xmlns,"ellipse")}),this.data[this.index-1]}arc(t,e,s,i,a,l=this.defaultColor,o=this.defaultColor,r=1){let n={x:t+s*Math.cos((a-90)*Math.PI/180),y:e+s*Math.cos((a-90)*Math.PI/180)},d={x:t+s*Math.cos((i-90)*Math.PI/180),y:e+s*Math.cos((i-90)*Math.PI/180)},h=a-i<=180?"0":"1",c=["M",n.x,n.y,"A",s,s,0,h,0,d.x,d.y].join(" ");return this.data.push({type:"path",d:c,background:l,strokeColor:o,strokeWidth:r,id:this.index,obj:document.createElementNS(this.xmlns,"path")}),this.data[this.index-1]}path(t,e=this.defaultColor,s=this.defaultColor,i=this.strokeWidth){return this.data.push({type:"path",d:t,background:e,strokeColor:s,strokeWidth:i,id:this.index++,obj:document.createElementNS(this.xmlns,"path")}),this.data[this.index-1]}image(t,e,s,i,a){return/^(https?)/.test(t)?(console.alert("We don't accept online URL request"),!1):(this.data.push({type:"image",imageUrl:t,x:i,y:a,width:e,height:s,id:this.index++,obj:document.createElementNS(this.xmlns,"image")}),this.data[this.index-1])}text(t,e,s,i="#000",a="1em"){return this.data.push({type:"text",x:e,y:s,fontSize:a,fill:i,text:t,id:this.index++,obj:document.createElementNS(this.xmlns,"text")}),this.data[this.index-1]}remove(t){t?this.data.splice(t.id,1):this.data=[],this.draw()}hide(t){t?document.querySelector(".s"+t.id).style.display="none":document.querySelector("."+this.name).style.display="none"}show(t){t?document.querySelector(".s"+t.id).style.display="block":document.querySelector("."+this.name).style.display="block",this.draw()}opacity(t,e){if(isNaN(t))console.warn("alpha must be a value between 0 and 1");else{t=t>=0&&t<=1?t:1;let s=e?".s"+e.id:"."+this.name;document.querySelector(s).style.opacity=t}}fadeIn(t,e){if(!(e=elementExists(e))||isNaN(t))return!1;e.style.display="block";let s=0,i=setInterval(function(){(s+=.1)>=1&&(clearInterval(i),s=1),e.style.opacity=s,e.style.filter="alpha(opacity="+s+")"},t/60)}fadeOut(t,e){if(!(e=elementExists(e))||isNaN(t))return!1;let s=1,i=setInterval(function(){(s-=.1)<=.1&&(clearInterval(i),s=0,e.style.display="none"),e.style.opacity=s,e.style.filter="alpha(opacity="+s+")"},t/60)}moveTo(t,e,s){if(!elementExists(t))return console.warn("The element to move must be an SVG element, except a path"),!1;if(isNaN(e)||isNaN(s))return console.warn("Coordonates must be values"),!1;if("path"==t.type){t.d.split(" ")[0].replace(/[a-zA-Z]/,""),t.d.split(" ")[1];console.warn("Cannot move path for now")}else/polyline|line/.test(t.type)?(this.data[t.id].x1=e,this.data[t.id].y1=s,this.data[t.id].x2=e+(t.x2-t.x1),this.data[t.id].y2=s+(t.y2-t.y1)):(this.data[t.id].x=e,this.data[t.id].y=s);this.draw()}fill(t,e){let s=elementExists(t);return!!s&&(!!hexValue(e)&&void(s.style.fill=e))}stroke(t,e){let s=elementExists(t);return!!s&&(!!hexValue(e)&&void(s.style.stroke=e))}strokeWidth(t,e){let s=elementExists(t);return!!s&&(!!hexValue(e)&&void(s.style.strokeWidth=e))}createPolyline(t){let e="";for(let s in t)e+=t[s][0]+","+t[s][1],s<t.length-1&&(e+=" ");return e}rect(t,e,s,i,a=this.defaultColor,l=this.defaultColor,o=this.strokeWidth){return isNaN(t)&&(t=0),isNaN(e)&&(e=0),isNaN(s)&&(s=0),isNaN(i)&&(i=0),this.polyline([[t,e],[t+s,e],[t+s,e+i],[t,e+i],!0],a,l,o)}setDefaultColor(t){this.defaultColor=t}}function setAttributes(t,e){for(var s in e)t.setAttributeNS(null,s,e[s])}function elementExists(t){try{return document.querySelector(".s"+t.id)}catch(e){return console.warn("This element does not exists: "+t),!1}}function hexValue(t){return/#([0-9a-fA-F]){6}/.test(t)}