Question

仅使用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>

Answer 1

只需使用：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>

如何在悬停时用纯色填充渐变SVG

1 个答案: