直接上代码了!
class svgc { constructor(req) { this.coord = req.coord this.shape = req.shape ? req.shape : 'polygon' this.base64 = req.base64 ? req.base64 : false this.bdcolor = req.bdcolor ? req.bdcolor : 'rgba(0,0,0,1)' this.bdwidth = req.bdwidth ? req.bdwidth : 1 this.bgcolor = req.bgcolor ? req.bgcolor : 'rgba(256,256,256,0)' } addsvg() { let a = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); a.setAttribute('xmlns', 'http://www.w3.org/2000/svg') a.setAttribute('version', '1') let c = document.createElementNS('http://www.w3.org/2000/svg', this.shape); c.setAttribute('points', this.coord); c.setAttribute('fill', this.bgcolor); c.setAttribute('stroke', this.bdcolor); c.setAttribute('stroke-width', this.bdwidth); console.log(this.base64) a.appendChild(c) if (this.base64) { this.svghtml = a.outerHTML console.log(this.svghtml) return this.svgbase64() } else { console.log(a) return a; } } svgbase64() { let imgsrc = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(this.svghtml)))}`; return imgsrc } }
测试代码
<div> <img id="a" src=""> </div> <div id="b"></div> <script> let b = document.getElementById('a') //实例a 变成imgsrc let vars = { coord: "30,10 230,10 250,250 0,250", base64: true, shape: 'polygon', bdcolor: 'rgba(0,0,0,1)', bdwidth: 1, bgcolor: 'rgba(256,256,256,0)' }; let svgs = new svgc(vars) let svg = svgs.addsvg() b.src = svg; // 实例b 直接使用svg let two = document.getElementById('b') let vars1={ coord:'35,17 166,17 166,301 35,301 53,277 35,301 53,325', shape:'polyline' } let svgss = new svgc(vars1) two.appendChild(svgss.addsvg()); </script>