用js在页面中创建svg标签不显示的问题

问题描述

直接在页面写入SVG,图形正常可以显示，
但是使用js动态创建SVG，添加入DOM节点，页面无法显示SVG图形

原因

SVG是基于XML格式定义图像的一种技术，因此创建节点的时候，需要指定命名空间（Namespace），也就是用createElementNS来代替createElement创建节点

封装的js创建svg的方法

思路如下：

• 1、通过document.getElementById根据元素ID来获取这个容器对象
• 2、使用document.createElementNS创建一个带http://www.w3.org/2000/svg命名空间的矩形对象
• 3、使用element.setAttribute设置这个矩形对象的属性
• 4、使用element.appendChild把它添加到容器里

封装方法如下：

/*
* tag：所要创建的标签名称
* attrs: 所需要添加的属性，｛key:val,key:val｝
*/
function makeSVG(tag, attrs) {
    const ns = 'http://www.w3.org/2000/svg';
    const xlinkns = 'http://www.w3.org/1999/xlink';

    let el= document.createElementNS(ns, tag);
    if (tag==='svg'){
        el.setAttribute('xmlns:xlink', xlinkns);
    }
    for (let k in attrs) {
        if (k === 'xlink:href') {
            el.setAttributeNS(xlinkns, k, attrs[k]);
        } else {
            el.setAttribute(k, attrs[k]);
        }
    }
    return el;
}

测试调用

window.addEventListener('load', function(){
    const svgtest = document.getElementsByTagName('body')[0];
    let svg = makeSVG('svg');
    let g = makeSVG('g');
    let rect = makeSVG('rect',{x:'0',y:'0',width:'100%',height:'100%',fill:'red'});
    
    g.appendChild(rect);
    svg.appendChild(g);
    svgtest.appendChild(svg);
    
});

svg调整层级

1、svg默认的层级关系：
SVG是按元素的书写顺序进行堆叠的，就是说后面的元素会叠在前面的元素上

2、js获取所有svg下的节点，再根据需要展示的顺序，调整节点顺序。
（ 参考链接：https://blog.csdn.net/happyduoduo1/article/details/51789552/）

参考链接：https://segmentfault.com/a/1190000022013374