svg2

<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;">
        <g style="cursor: pointer;">
           <circle r="30" cx="100" cy="100" fill="none" stroke="blue" stroke-width="2"/>     
        </g>
        <g style="cursor: pointer;">
           <line x1="100" y1="100" x2="300" y2="180" stroke="black"></line>
           <rect width="20" height="20" x="190" y="130" rx="5" fill="white" stroke="black"></rect> 
           <text x="200" y="146" font-size="16" text-anchor="middle">?</text>
        </g>
        <g style="cursor: pointer;">
           <circle r="50" cx="300" cy="180" fill="none" stroke="red" stroke-width="2"/> 
        </g>
    </svg>
<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;">
        <g style="cursor: pointer;">
           <line x1="100" y1="100" x2="300" y2="180" stroke="black" stroke-width="1"></line>
           <line x1="100" y1="100" x2="300" y2="180" stroke="none" stroke-width="4"></line>
           <rect width="20" height="20" x="190" y="130" rx="5" fill="#ccc" stroke="black" stroke-width="1"></rect> 
           <text x="200" y="146" font-size="16" text-anchor="middle">?</text>
        </g>
        <g style="cursor: pointer;">
           <circle r="30" cx="100" cy="100" fill="white" stroke="blue" stroke-width="2"/>
           <text x="100" y="108" font-size="16" text-anchor="middle">小王</text>    
        </g>
        <g style="cursor: pointer;">
           <circle r="50" cx="300" cy="180" fill="white" stroke="red" stroke-width="2"/> 
           <text x="300" y="188" font-size="16" text-anchor="middle">小李</text>
        </g>
    </svg>
创建元素

createElementNS
- 两个参数
- 命名空间,标签名
<script type="text/javascript">
        window.onload = () => {
            let svgNS = 'http://www.w3.org/2000/svg'
            let body = document.getElementsByTagName('body')[0]
            let oSvg = document.createElementNS(svgNS, 'svg')
            oSvg.setAttribute('xmlns', svgNS)
            oSvg.setAttribute('width', '100%')
            oSvg.setAttribute('height', '100%')
            body.appendChild(oSvg)
        }
</script>
封装一个createTag函数 来创建元素和属性
// 传入标签名,属性对象
function createTag(svgElm,attrObj) {
            let domObj = document.createElementNS('http://www.w3.org/2000/svg',svgElm)
            for(let item in attrObj){
                domObj.setAttribute(item, attrObj[item])
            }
            return domObj
        }
window.onload = () => {
            let svgNS = 'http://www.w3.org/2000/svg'
            let body = document.getElementsByTagName('body')[0]
            let fragment = document.createDocumentFragment()
            let oSvg = createTag('svg',{'xmlns':svgNS, 'width':'100%', 'height':'100%'})

            let g1 = createTag('g',{'style':'cursor: pointer;'})
            let line1 = createTag('line', {'x1':'100','y1':'100','x2':'300','y2':'180','stroke':'black','stroke-width':'1'})
            let line11 = createTag('line', {'x1':'100','y1':'100','x2':'300','y2':'180','stroke':'none','stroke-width':'4'})
            let rect1 = createTag('rect',{'width':'20','height':'20','x':'190','y':'130','rx':'5','fill':'#ccc','stroke':'black','stroke-width':'1'})
            let text1 = createTag('text',{'x':'200','y':'146','font-size':'16','text-anchor':'middle'})
            text1.innerHTML = '?'
            g1.appendChild(line1)
            g1.appendChild(line11)
            g1.appendChild(rect1)
            g1.appendChild(text1)
            oSvg.appendChild(g1)
            fragment.appendChild(oSvg)
            body.appendChild(fragment)
        }
成功改写成js创建模式