在svg文件中,我们看到path标签有fill属性,这个属性就是控制图片颜色的,如果他的值为'currentColor',那么他就会根据use标签的color属性来染色
我们可以通过这个设置来实现hover效果
代码如下
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
//一般fill属性在path标签的最后面
<path d="M19.8176 14.8927C21.2211 13.7699 22.0632 12.0295 22.0632 10.1208C22.0632 6.69619 19.3123 3.94531 15.8877 3.94531C12.4632 3.94531 9.71229 6.69619 9.71229 10.1208C9.71229 12.0295 10.6105 13.7699 11.9579 14.8927C8.98247 16.2962 6.90527 19.3278 6.90527 22.8646V26.1769C6.90527 26.9067 7.52282 27.5243 8.25264 27.5243H23.5228C24.2526 27.5243 24.8702 26.9067 24.8702 26.1769V22.8646C24.8702 19.3278 22.793 16.2962 19.8176 14.8927Z" fill="currentColor"/>
//所有path标签都要改
<path d="M26.4983 14.4997C27.8457 13.3769 28.6878 11.7488 28.6878 9.89619C28.6878 6.58391 25.993 3.94531 22.6808 3.94531H22.4562C21.9509 3.94531 21.5579 4.28215 21.4457 4.78742C21.3334 5.29268 21.5018 5.7418 21.8948 6.02251C23.2422 6.92075 24.0281 8.3804 24.0281 9.95233C24.0281 11.412 23.3544 12.7593 22.1755 13.6576C21.8386 13.8822 21.6702 14.2751 21.7264 14.6681C21.7825 15.0611 22.0071 15.3979 22.4 15.5664L22.7369 15.7348H22.793C22.793 15.7348 22.8492 15.7348 22.8492 15.7909C25.3755 17.1383 26.9474 19.7207 26.9474 22.5278V26.1769C26.8913 26.5137 26.9474 26.8506 27.172 27.1313C27.3965 27.412 27.6772 27.5243 28.0141 27.5243H30.2597C30.9895 27.5243 31.6071 26.9067 31.6071 26.1769V22.5278C31.6071 19.0471 29.5299 15.9593 26.4983 14.4997ZM8.9825 15.7909C9.09479 15.7348 9.20707 15.6786 9.26321 15.5664C9.60005 15.3979 9.88075 15.0611 9.93689 14.6681C9.99303 14.2751 9.82461 13.8822 9.48777 13.6576C8.30882 12.7593 7.63514 11.412 7.63514 9.95233C7.63514 8.3804 8.4211 6.92075 9.76847 6.02251C10.1615 5.7418 10.3299 5.23654 10.2176 4.78742C10.1053 4.33829 9.65619 4.00145 9.15093 3.94531H8.9825C5.67022 3.94531 2.97549 6.64005 2.97549 9.89619C2.97549 11.7488 3.81759 13.433 5.2211 14.5558C2.24566 16.0155 0.224609 19.0471 0.224609 22.5278V26.1769C0.224609 26.9067 0.842153 27.5243 1.57198 27.5243H3.81759C4.15443 27.5243 4.49128 27.3558 4.6597 27.1313C4.88426 26.8506 4.9404 26.5137 4.88426 26.1769V22.5278C4.88426 19.7207 6.45619 17.1383 8.9825 15.7909Z" fill="currentColor"/>
<defs>
<linearGradient id="paint0_linear_203_10659" x1="15.8877" y1="3.94531" x2="15.8877" y2="27.5243" gradientUnits="userSpaceOnUse">
<stop stop-color="#ABD6FF"/>
<stop offset="1" stop-color="#379EFF"/>
</linearGradient>
<linearGradient id="paint1_linear_203_10659" x1="15.9158" y1="3.94531" x2="15.9158" y2="27.5243" gradientUnits="userSpaceOnUse">
<stop stop-color="#ABD6FF"/>
<stop offset="1" stop-color="#379EFF"/>
</linearGradient>
</defs>
</svg>
