通过id来获取svg的区域然后通过style.fill改变填充颜色,示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Change SVG Element Colors</title> </head> <body> <!-- SVG图像示例,这里只做示意,并不代表真实的小女孩图案 --> <svg width="200px" height="200px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> <!-- 假设小女孩的头发区域 --> <rect id="hair" x="50" y="50" width="100" height="50" fill="black"/> <!-- 假设小女孩的衣服区域 --> <rect id="clothes" x="50" y="150" width="100" height="100" fill="blue"/> <!-- 这里可以添加更多的SVG元素 --> </svg> <!-- 改变头发颜色的按钮 --> <button id="change-hair-color">Change Hair Color</button> <!-- 改变衣服颜色的按钮 --> <button id="change-clothes-color">Change Clothes Color</button> <script> document.addEventListener('DOMContentLoaded', function() { // 改变头发颜色 document.getElementById('change-hair-color').addEventListener('click', function() { var hairElement = document.getElementById('hair'); hairElement.style.fill = 'brown'; // 改变头发颜色为棕色 }); // 改变衣服颜色 document.getElementById('change-clothes-color').addEventListener('click', function() { var clothesElement = document.getElementById('clothes'); clothesElement.style.fill = 'green'; // 改变衣服颜色为绿色 }); }); </script> </body> </html>
网友回复
js如何流式输出ai的回答并折叠代码块,点击代码块右侧可预览代码?
ai大模型如何将文章转换成可视化一目了然的图片流程图图表?
大模型生成html版本的ui原型图和ppt演示文档的系统提示词怎么写?
rtsp视频直播流如何转换成websocket流在h5页面上观看?
为啥coze会开源工作流agent coze studio?
如何检测网页是通过收藏夹打开的?
python如何实现类似php的http动态脚本请求处理响应代码?
js如何实现类似php的http动态脚本请求处理响应代码?
trae与solo有啥区别不同?
vue如何让ai动态生成问卷调查多步骤表单式收集基础信息自动规划执行任务?