SVG最详细的带干扰线条的随机数验证码

什么是svg？

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

svg中的标签

元素是用来创建一个直线

(x1,y1)为起点坐标（x2,y2）为下一个点的坐标两点连接成一条直线，stroke给线条添加颜色，stroke-width线条的宽度.

元素用于定义文本

E

(x,y)为文本内容的坐标，fill添加背景色 rotate旋转的角度，E为文本内容。

做出来的效果如下：

给svg一个样式

        svg {
            width: 200px;
            height: 50px;
            border: 1px solid black;
            font-weight: bold;
            font-family: "宋体"
        }

html两个标签

    
    
看不清换一张

JS部分

   		//获取到两个节点
        let svgEle = document.getElementById("svgEle");
        let pEle= document.querySelector("p");
        //定义了数字、大小写字母一个字符串，用来显示在svg上
        let a = "1234567890qwertyuiopasdfghjklmnbvcxzQWERRTIPOASDFGHJKLZXCVBNM";
        render();//一进来页面就渲染一次
        pEle.onclick = function () { //绑定到p节点上，点击就重新渲染一下页面，验证码随机
            render();
        }
		//封装函数
        function render() {
            let j = random(10, 18)//调用随机数生成10到18的一个数字，用来随机线条的条数
            let str = "";//利用字符串拼接添加到svg节点
            let math = "";//用来保存随机出来的验证码
			//生成随机线条
            for (let i = 0; i < j; i++) {//j为一个变量，随机生成，颜色随机、坐标随机、宽度随机。
                str += `
                        `
            }
            //生成4个随机数字或字母，颜色随机、坐标随机、大小随机。
            for (let i = 0; i < 4; i++) {
                let temp = a[random(arr.length - 1)];//用来保存每循环一次在字符串a中找到的字符
                str += `
                            ${temp}
                        `
                math += temp;
            }
            svgEle.innerHTML = str;//最后在拼接在svg标签里
        }
		//这里封装了一个随机数的函数,传两个比如random(1，10)随机成包含1到10的整数，
		传一个参数random(10)，默认另一个为0，随机生成包含0到10的整数.
        function random(min, max = 0) {
            if (min > max) {
                [min, max] = [max, min];
            }
            let s = parseInt(Math.random() * (max - min + 1) + min);
            return s;//
        }