js的svg生成封装组件

直接上代码了!

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>


相关内容

发表评论

验证码:
点击我更换图片

最新评论