基于vue使用SVG绘制各种图形 上图等

基于背景图进行绘制以及上图效果图 svg绘制线矩形不规则图形等.png

主要代码

//创建各种图形
createTag(tagName, tagAttr) {
    let tag = document.createElementNS(ming, tagName);
    for (var attr in tagAttr) {
        if(tag.setAttribute){
            tag.setAttribute(attr, tagAttr[attr]);
        }
    }
    return tag;
}
//使用createTag进行上图展示
_this.oPolyPoint = _this.createTag('image', {
    'width': data.width,
    'height': data.height,
    'visibility': 'visible',
    'title': data.data.name,
    'id': data.data.id || data.data.gbid || data.data.deviceId
});

组件绘制代码