SVG简单实现模拟交换机报警

效果 :

实现思路

使用SVG画图软件画出所需图片,可直接生成代码 . 非常不错~ 生成的代码大概是介个样子

一行代码组成一个框,有本身所属的ID,可以自定义.如:col1-row2-1
获取ID,利用JS动态添加类名改变边框颜色

    const keys = document.getElementById('keys');
    const button1 = document.getElementById('button1');
    button1.addEventListener('click', changeColor);
    let oldKeys = [];

    function changeColor() {
        console.log(keys.value);
        let keysValue = keys.value;
        let keysValueArr = keysValue.split(',')
        console.log(keysValueArr);

        // remove class
        oldKeys.forEach((item) => {
        document.getElementById(item).classList.remove('svg-stroke-width');
        });

        // add class
        setTimeout(() => {
        keysValueArr.forEach((item) => {
            console.log(item);
            document.getElementById(item).classList.add('svg-stroke-width');
        });
        oldKeys = keysValueArr;
        }, 1000);

body {
      overflow: hidden;
    }

    .svg-stroke-width {
    
      animation: strokeWidth 3s infinite;
    }

    @keyframes strokeWidth {
      0% {
        stroke-width: 0.1;
        stroke: #f35b47;
      }

      100% {
        stroke-width: 5;
        stroke: #ff4e4e;
      }
    }

SVG实现动态效果

效果 :

实现思路