当前位置：首页 > news >正文

svg 图片怎么设置 :hover 时变色

news 2025/8/13 19:27:04

svg 内部可以用 style 标签设置样式

<svg t="1754711641342" class="cls-1" width="200px" height="200px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1059">
<style>
.cls-1{fill:#666666;}
.cls-1:hover rect{fill:#c50015;}
.cls-1:hover path{fill:#c50015;}
</style>
<path fill="#666666" d="M919.552 405.6064l-57.1392-7.9872a36.1472 36.1472 0 0 1-28.0064-22.1184 350.3104 350.3104 0 0 0-42.9056-74.496 36.0448 36.0448 0 0 1-5.2224-35.328l21.7088-53.4528a35.4304 35.4304 0 0 0-15.2064-44.1344l-123.6992-71.4752a35.4816 35.4816 0 0 0-45.7728 8.9088l-35.4304 45.2608a36.3008 36.3008 0 0 1-33.4848 13.312 335.6672 335.6672 0 0 0-85.6064 0 36.3008 36.3008 0 0 1-33.4848-13.312l-35.3792-45.2608a35.4816 35.4816 0 0 0-45.824-8.9088L230.4 167.936a35.584 35.584 0 0 0-15.2064 44.1344l21.7088 53.504a35.9936 35.9936 0 0 1-5.2224 35.2768 346.112 346.112 0 0 0-42.9056 74.496 35.7888 35.7888 0 0 1-27.9552 22.1184l-57.2416 7.9872a35.6352 35.6352 0 0 0-30.72 35.328v142.848c0 17.7152 13.1584 32.768 30.6176 35.2256l57.2416 7.9872c12.6976 1.792 22.9888 10.3936 28.0064 22.1184 11.264 26.6752 25.7024 51.712 42.8544 74.496 7.68 10.24 10.0352 23.5008 5.2224 35.328l-21.7088 53.4528c-6.656 16.384-0.2048 35.328 15.2064 44.1344l123.6992 71.3728c15.36 8.9088 34.9184 5.12 45.824-8.9088l35.3792-45.2608a36.3008 36.3008 0 0 1 33.4848-13.312 335.6672 335.6672 0 0 0 85.6064 0c12.8-1.6384 25.6 3.072 33.4848 13.312l35.4304 45.2608a35.4816 35.4816 0 0 0 45.7728 8.9088l123.6992-71.3728a35.584 35.584 0 0 0 15.2064-44.1344l-21.7088-53.504a36.0448 36.0448 0 0 1 5.2224-35.328 346.112 346.112 0 0 0 42.9056-74.4448 35.7888 35.7888 0 0 1 28.0064-22.1184l57.1904-7.9872a35.5328 35.5328 0 0 0 30.6176-35.2256V440.832a35.1232 35.1232 0 0 0-30.5152-35.2256z m-407.9616 245.504a138.9056 138.9056 0 1 1 0-277.8624 138.9056 138.9056 0 0 1 0 277.8624z" p-id="1060"></path>
</svg>

class="cls-1" 设置样式，style 里设置 :hover，效果