最近有个需求,就是把上传的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;
}
标签：translateY,svg,transform,let,file,服务器,上传 From： https://www.cnblogs.com/huchangjun/p/17914285.html