是否可以仅使用 css 来做到这一点？我有带有预定义渐变的 svg，我想在 css 中悬停时用颜色填充。我尝试的是将 svg 标记嵌入到 html 结构中，然后将一个类添加到路径，然后我将使用 fill 属性在 css 中设置样式。但这没有用，我应该如何解决这个问题？
供引用的 SVG 标签:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<defs>
<style>
.be51c222-80b4-489f-b2dd-486e23c9eef8{fill:url(#a89527f1-b302-44b4-9a05-0e6cac241929);}
</style>
<linearGradient id="a89527f1-b302-44b4-9a05-0e6cac241929" x1="12.05" x2="11.97" y1="23.94" y2="4.41" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#c41230"/>
<stop offset="1" stop-color="#f62028"/>
</linearGradient>
</defs>
<title>
slide-down
</title>
<g id="a50b190a-9952-4444-9199-5e8e5ee16a51" data-name="Warstwa 2">
<g id="bf15b3ba-4a89-4930-a912-ff1c5832ba6d" data-name="Warstwa 1">
<path d="M24,12A12,12,0,1,0,12,24,12,12,0,0,0,24,12ZM7,13h4V5h2v8h4l-5,6Z" class="be51c222-80b4-489f-b2dd-486e23c9eef8 icon-slide"/>
</g>
</g>
</svg>最佳答案
只需使用 :hover 伪选择器即可。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<defs>
<style>
.be51c222-80b4-489f-b2dd-486e23c9eef8{fill:url(#a89527f1-b302-44b4-9a05-0e6cac241929);}
.be51c222-80b4-489f-b2dd-486e23c9eef8:hover{fill:blue;}
</style>
<linearGradient id="a89527f1-b302-44b4-9a05-0e6cac241929" x1="12.05" x2="11.97" y1="23.94" y2="4.41" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#c41230"/>
<stop offset="1" stop-color="#f62028"/>
</linearGradient>
</defs>
<title>
slide-down
</title>
<g id="a50b190a-9952-4444-9199-5e8e5ee16a51" data-name="Warstwa 2">
<g id="bf15b3ba-4a89-4930-a912-ff1c5832ba6d" data-name="Warstwa 1">
<path d="M24,12A12,12,0,1,0,12,24,12,12,0,0,0,24,12ZM7,13h4V5h2v8h4l-5,6Z" class="be51c222-80b4-489f-b2dd-486e23c9eef8 icon-slide"/>
</g>
</g>
</svg>关于javascript - 如何在悬停时用纯色填充渐变 svg，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57580531/