<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.svg-icon{
fill-rule: evenodd;
width: 36px;
height: 39px;
padding-left: 10px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" width="100%" height="100%" viewBox="0 0 36 39">
<symbol id="svg >
<path d="M641.51,1109.49h-3v-3h2a1,1,0,0,0,1-1v-10a1,1,0,0,0-1-1h-4v-3h4a4,4,0,0,1,4,4v11A3,3,0,0,1,641.51,1109.49Zm-2-20a4,4,0,1,1,4-4A4,4,0,0,1,639.5,1089.51Zm1-5h-2v2h2Zm-10,28h-2v-3h1a3,3,0,0,0,3-3v-12a3,3,0,0,0-3-3h-6a3,3,0,0,0-3,3v12a3,3,0,0,0,3,3h1v3h-2a5,5,0,0,1-5-5v-13a6,6,0,0,1,6-6h6a6,6,0,0,1,6,6v13A5,5,0,0,1,630.5,1112.5Zm-4-25a7,7,0,1,1,7-7A7,7,0,0,1,626.5,1087.5Zm0-11a4,4,0,1,0,4,4A4,4,0,0,0,626.5,1076.5Zm-13,13a4,4,0,1,1,4-4A4,4,0,0,1,613.5,1089.51Zm1-5h-2v2h2Zm-2,7h4v3h-4a1,1,0,0,0-1,1v10a1,1,0,0,0,1,1h2v3h-3a3,3,0,0,1-3-3v-11A4,4,0,0,1,612.49,1091.49Z" transform="translate(-608.49, -1073.5)" fill="#d1c4ae" fill-rule="evenodd"></path>
</symbol>
<symbol id="k">
<path d="M914.5,359.5a8,8,0,1,1-8,8,8.009,8.009,0,0,1,8-8m0-2.5A10.5,10.5,0,1,0,925,367.5,10.5,10.5,0,0,0,914.5,357h0Zm-7.228-.939A2.982,2.982,0,0,0,905,355h-6a3,3,0,0,0-3,3v6a3,3,0,0,0,3,3v7h-0.1a1.465,1.465,0,0,1,.1.5,1.5,1.5,0,0,1-3,0,1.465,1.465,0,0,1,.1-0.5H896v-4.422A5,5,0,0,1,893,365v-7a6,6,0,0,1,6-6h6a5.991,5.991,0,0,1,4.959,2.625A10.468,10.468,0,0,0,907.272,356.061ZM901.5,351a6.5,6.5,0,1,1,6.5-6.5A6.5,6.5,0,0,1,901.5,351Zm0-10a3.5,3.5,0,1,0,3.5,3.5A3.5,3.5,0,0,0,901.5,341Z" transform="translate(-893 -338)" fill="#d4c6af" fill-rule="evenodd"></path>
</symbol>
</svg>
<svg class="svg-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg" />
</svg>
<svg class="svg-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#k" />
</svg>
<script>
window.onload=function () {
let svgs=document.getElementsByTagName('path');
let item=document.getElementsByClassName('svg-icon');
for(let i=0;i<item.length;i++){ //精灵图无法做到此功能，根据鼠标移入移出改变小图标元素
item[i].onmouseenter=function () {
svgs[i].setAttribute("fill","#f10215");
}
item[i].onmouseleave=function () {
svgs[i].setAttribute("fill","#d1c4ae");
}
}
}
</script>
</body>
</html>
svg.gif
