改变上传的svg颜色并生成新的svg文件,再上传或者更新至服务器上-526互联

最近有个需求,就是把上传的svg改颜色,并生成新的svg图片上传值服务器上

<!DOCTYPE html>
<html>

<head>
    <title>上传svg并修改颜色得到新的svg文件</title>
    <style>
        #svgContainer{
            padding: 50px;
            display: inline-block;
        }
        .shake{
            animation: shake 1s infinite;
        }
        .diffusion{
            animation: diffusion 1s infinite;
        }

        @keyframes shake {
            0% { transform: translateY(0); }
            10%,90% { transform: translateY(-2px); }
            20%, 80% { transform: translateY(-4px); }
            30%,70% { transform: translateY(-6px); }
            40%,60% { transform: translateY(-8px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0); }
        }
        @keyframes diffusion {
            0% { transform:  scale(1)}
            10%,90% { transform: scale(1.1); }
            20%, 80% { transform: scale(1.2); }
            30%, 70% { transform: scale(1.3); }
            40%,60% { transform: scale(1.4); }
            50% { transform: scale(1.5); }
            100% { transform: scale(1); }
        }
    </style>
</head>

<body>
    <input type="file" id="svgUpload" accept=".svg">
    <button id="uploadButton">随机颜色</button>
    <button id="beatBtn" onclick="changeClassFn('shake')">跳动</button>
    <button id="diffusionBtn" onclick="changeClassFn('diffusion')">扩散</button>
    <br />
    <div id="svgContainer"></div> <!-- 用于显示 SVG -->
</body>
<script src="./index.js"></script>
</html>

index.js中的代码如下:

 const getRandomHexColor = () => {  // 生成随机颜色
        let letters = '0123456789ABCDEF';
        let color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
    document.getElementById('svgUpload').addEventListener('change', (ev) => {
        let file = ev.target.files[0];
        if (file) {
            console.log(file, '上传成功的文件')
            let reader = new FileReader();
            reader.onload = (e) => {
                document.getElementById('svgContainer').innerHTML = e.target.result;
            }
            reader.readAsText(file);
        }
    })
    document.getElementById('uploadButton').addEventListener('click', () =>{
        changeClassFn('')
        let fileInput = document.getElementById('svgUpload');
        let file = fileInput.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = (e) => {
                document.getElementById('svgContainer').innerHTML = e.target.result;
                // 在这里可以添加修改 SVG 颜色的代码
                changeSvgColor(getRandomHexColor()); 
            };
            console.log(file, '修改后的svg文件')
            reader.readAsText(file);
　　　　　　　　// 上传新的文件至服务器
            uploadFile(file);
        }
    });

    const uploadFile = (file) => {
         let formData = new FormData();
         formData.append('file', file);
         console.log(formData)
         fetch('上传图片地址', {
             method: 'POST',
             body: formData,
         }).then((response) => response.json()).then((result) => {
             console.log("Success:", result);
         })
    }

    const changeSvgColor = (color) => {
        let svg = document.getElementById('svgContainer').querySelector('svg');
        if (svg) {
            // 修改 SVG 所有路径的填充颜色
            svg.querySelectorAll('path').forEach((path) => {
                path.style.fill = color;
            });
        }
    }

    const changeClassFn = (className) => {
        document.getElementById('svgContainer').className = className;
    }