JavaScript创建SVG

今天闲鱼有买家问我svg能不能写，给我发来了需求：

一番百度必应之后，咱就试着写写吧。

构思：页面有一个输入框、提交按钮和一个div（用来展示svg），点击按钮后获取输入框的值。

html
<input type="text" name="inp" id="inp">
<button id="btn">确定</button>
<div class="box"></div>

获取输入框的值很好办，给按钮加一个onclick监听来得到input的value即可

javascript
function handleSubmit() {
    let input = document.getElementById('inp')
    let value = input.value
    console.log(value)
}
document.getElementById('btn').onclick = handleSubmit

测试运行确认可以在控制台输出得到的值即可

接下来创建一个800*600的svg画布

javascript
let svgNS = "http://www.w3.org/2000/svg"
let div = document.querySelector('.box')
function createTag(tag, obj) {
    var oTag = document.createElementNS(svgNS, tag)
    oTag.setAttribute('id', 's') // 这里为svg标签添加一个id，方便后续清空
    for(var attr in obj) {
        oTag.setAttribute(attr, obj[attr])
    }
    return oTag
}

var osvg = createTag('svg', {'xmlns':'svgNS', 'width':'800', 'height':'600'})

下面就是写4个生成函数了，其中圆、椭圆、矩形都有svg提供的标签，正六角星则需要我们通过path绘制

javascript
function createCircle() {
    var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
    circle.setAttribute('cx', 70)
    circle.setAttribute('cy', 80)
    circle.r.baseVal.value = 70
    circle.setAttribute('fill', 'red')
    osvg.append(circle)
}

function createEllipse() {
    var ellipse = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse')
    ellipse.setAttribute('cx', 70)
    ellipse.setAttribute('cy', 80)
    ellipse.setAttribute('rx', 70)
    ellipse.setAttribute('ry', 40)
    ellipse.setAttribute('fill', 'green')
    osvg.append(ellipse)
}

function createRectangle() {
    var rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
    rectangle.setAttribute('cx', 70)
    rectangle.setAttribute('cy', 90)
    rectangle.setAttribute('width', 140)
    rectangle.setAttribute('height', 160)
    rectangle.setAttribute('fill', 'aqua')
    osvg.append(rectangle)
}

function createHexStar() {
    var hexagonalStar1 = document.createElementNS('http://www.w3.org/2000/svg', 'path')
    hexagonalStar1.setAttribute('d', 'm247.36202,313.63712l103.99999,-181.99998l103.99999,181.99998l-207.99998,0z')
    hexagonalStar1.setAttribute('fill', 'blue')
    var hexagonalStar2 = document.createElementNS('http://www.w3.org/2000/svg', 'path')
    hexagonalStar2.setAttribute('transform', 'rotate(-180 351.362 284.637)')
    hexagonalStar2.setAttribute('d', 'm247.36202,375.63712l103.99999,-181.99998l103.99999,181.99998l-207.99998,0z')
    hexagonalStar2.setAttribute('fill', 'blue')
    osvg.append(hexagonalStar1)
    osvg.append(hexagonalStar2)
}

最后在handleSubmit()中对输入的值进行判断从而执行不同的方法即可，执行前记得添加document.getElementById('s').innerHTML = ""来清空画布，下面是效果：

GIF 2022-3-14 22-02-11

最后放上代码：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <input type="text" name="inp" id="inp">
    <button id="btn">确定</button>
    <div class="box"></div>

    <script>
        window.onload = function() {

            let svgNS = "http://www.w3.org/2000/svg"
            let div = document.querySelector('.box')

            function createTag(tag, obj) {
                var oTag = document.createElementNS(svgNS, tag)
                oTag.setAttribute('id', 's')
                for(var attr in obj) {
                    oTag.setAttribute(attr, obj[attr])
                }
                return oTag
            }

            var osvg = createTag('svg', {'xmlns':'svgNS', 'width':'800', 'height':'600'})

            function createCircle() {
                var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
                circle.setAttribute('cx', 70)
                circle.setAttribute('cy', 80)
                circle.r.baseVal.value = 70
                circle.setAttribute('fill', 'red')
                osvg.append(circle)
            }

            function createEllipse() {
                var ellipse = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse')
                ellipse.setAttribute('cx', 70)
                ellipse.setAttribute('cy', 80)
                ellipse.setAttribute('rx', 70)
                ellipse.setAttribute('ry', 40)
                ellipse.setAttribute('fill', 'green')
                osvg.append(ellipse)
            }

            function createRectangle() {
                var rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
                rectangle.setAttribute('cx', 70)
                rectangle.setAttribute('cy', 90)
                rectangle.setAttribute('width', 140)
                rectangle.setAttribute('height', 160)
                rectangle.setAttribute('fill', 'aqua')
                osvg.append(rectangle)
            }

            function createHexStar() {
                var hexagonalStar1 = document.createElementNS('http://www.w3.org/2000/svg', 'path')
                hexagonalStar1.setAttribute('d', 'm247.36202,313.63712l103.99999,-181.99998l103.99999,181.99998l-207.99998,0z')
                hexagonalStar1.setAttribute('fill', 'blue')
                var hexagonalStar2 = document.createElementNS('http://www.w3.org/2000/svg', 'path')
                hexagonalStar2.setAttribute('transform', 'rotate(-180 351.362 284.637)')
                hexagonalStar2.setAttribute('d', 'm247.36202,375.63712l103.99999,-181.99998l103.99999,181.99998l-207.99998,0z')
                hexagonalStar2.setAttribute('fill', 'blue')
                osvg.append(hexagonalStar1)
                osvg.append(hexagonalStar2)
            }

            function handleSubmit() {
                let input = document.getElementById('inp')
                let value = input.value

                document.getElementById('s').innerHTML = ""

                if(value==='C') {
                    createCircle()
                }

                if(value==='E') {
                    createEllipse()
                }

                if(value==='R') {
                    createRectangle()
                }

                if(value==='S') {
                    createHexStar()
                }
            }
            document.getElementById('btn').onclick = handleSubmit

            div.append(osvg)

        }
    </script>
</body>
</html>