<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<style>
:root {
--mainColor: green;
--helpColor: red;
}
.svg-icon svg {
width: 250px;
height: 250px;
}
.svg-icon path {
fill: var(--mainColor);
}
</style>
</head>
<body>
<div class="svg-icon" >
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.27165 7.35205L3.36765 7.36005C4.06365 7.41605 4.58365 8.02405 4.53565 8.72005C4.50365 9.16805 4.23165 9.56005 3.83965 9.76005L3.78365 9.78405V11.368C3.78365 11.416 3.79965 11.456 3.82365 11.488L3.84765 11.512L3.87965 11.536L8.53565 14.16C8.59165 14.192 8.64765 14.192 8.68765 14.176L8.72765 14.152L13.3596 11.536C13.4076 11.512 13.4476 11.464 13.4556 11.408L13.4636 11.368V10.816C13.4636 10.56 13.6476 10.336 13.9276 10.288L13.9996 10.28C14.2956 10.28 14.5356 10.52 14.5356 10.816V11.368C14.5356 11.824 14.2876 12.248 13.8956 12.472L9.26365 15.088C8.87965 15.304 8.40765 15.304 8.01565 15.088L3.35965 12.464C2.95965 12.24 2.71165 11.816 2.71165 11.36V9.75205L2.63965 9.71205C2.22365 9.47205 1.97565 9.01605 2.00765 8.53605L2.01565 8.43205C2.10365 7.81605 2.63965 7.35205 3.27165 7.35205ZM9.25565 2.16005L13.8876 4.77605C14.2876 5.00005 14.5356 5.42405 14.5356 5.88005V7.46405L14.6076 7.49605C15.0236 7.72005 15.2876 8.17605 15.2716 8.66405L15.2636 8.76805C15.1756 9.46405 14.5436 9.95205 13.8476 9.86405C13.1516 9.77605 12.6636 9.14405 12.7516 8.44805C12.7996 8.04805 13.0396 7.69605 13.3996 7.49605L13.4716 7.46405V5.87205C13.4716 5.83205 13.4556 5.78405 13.4316 5.75205L13.4076 5.72805L13.3756 5.70405L8.72765 3.09605C8.67965 3.07205 8.62365 3.06405 8.57565 3.08005L8.53565 3.09605L3.87965 5.72005C3.83165 5.74405 3.79165 5.79205 3.78365 5.84805V6.42405C3.78365 6.70405 3.57565 6.94405 3.29565 6.96805C3.00765 6.99205 2.75165 6.78405 2.71965 6.50405L2.71165 6.43205V5.88805C2.71165 5.43205 2.95965 5.00805 3.35965 4.78405L8.01565 2.16005C8.39165 1.94405 8.87165 1.94405 9.25565 2.16005ZM3.27165 8.13605C2.99965 8.12005 2.76765 8.32805 2.75965 8.60005C2.74365 8.87205 2.95965 9.09605 3.22365 9.11205H3.27165C3.54365 9.09605 3.75165 8.87205 3.73565 8.60005C3.71965 8.34405 3.51965 8.14405 3.27165 8.13605ZM13.9916 8.13605C13.7196 8.12005 13.4956 8.33605 13.4796 8.60005C13.4636 8.86405 13.6796 9.09605 13.9436 9.11205H13.9916C14.2636 9.09605 14.4716 8.87205 14.4556 8.60005C14.4476 8.34405 14.2476 8.14405 13.9916 8.13605Z" fill="#165DFF"/>
<path d="M8.61595 9.60794H6.89595L6.57595 10.5679H5.54395L7.21595 5.88794H8.31995L9.97594 10.5679H8.91995L8.61595 9.60794ZM8.34395 8.79994L7.75995 6.95994L7.15995 8.79994H8.34395ZM10.4959 5.89594H11.4719V10.5759H10.4959V5.89594Z" fill="#165DFF" fill-opacity="0.2"/>
</svg>
</div>
<span class="svg-icon" id="ai" data-icon="ai"></span>
<button onclick="changeColor()">按钮</button>
</body>
<script>
$(document).ready(function () {
//设置全局变量
const body = document.querySelector(':root');
body.style.setProperty('--mainColor', 'red');
$(".svg-icon").each(function () {
getSvg($(this));
})
});
function changeColor() {
setIconColor("ai","yellow");
}
function setIconColor(icon,color) {
var obj = $('[data-icon="' + icon +'"]');
obj.find("svg>path").css("fill", color);
}
function getSvg(obj) {
let icon = $(obj).data("icon");
if(icon){
fetch('/images/' + icon + '.svg')
.then(response => response.text())
.then(svgText => {
// 在这里处理 SVG 文本
$(obj).html(svgText);
})
.catch(error => {
// 处理错误
console.error(error);
});
}
}
</script>
</html>