html - SVG 颜色悬停 - 找不到任何解决方案

Question

几天来我一直在尝试解决这个问题，我只想在悬停在 SVG 上时更改颜色(仅使用 CSS)，我找到了很多教程(在并且不在 Stack 中)，但它们都不适合我。

谁能告诉我我能做什么？这是 SVG 代码:

    <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-58 251 500 500" style="enable-background:new -58 251 500 500;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
</style>
<path id="svgbutton" d="M-328,271.1c-127,0-229.9,102.9-229.9,229.9S-455,730.9-328,730.9S-98.1,628-98.1,501S-201,271.1-328,271.1z M-139.2,580.8
    c-10.3,24.4-25.1,46.3-43.9,65.1c-18.8,18.8-40.7,33.6-65.1,43.9c-25.3,10.7-52.1,16.1-79.8,16.1s-54.5-5.4-79.8-16.1
    c-24.4-10.3-46.3-25.1-65.1-43.9c-18.8-18.8-33.6-40.7-43.9-65.1c-10.7-25.3-16.1-52.1-16.1-79.8c0-26.5,5-52.3,14.8-76.6l0,0l0,0
    l181.3,181.3c2.3,2.4,5.5,3.7,8.8,3.7s6.4-1.4,8.8-3.7l181.3-181.2l0.2-0.2c0,0,0,0,0,0.1c9.8,24.3,14.8,50.1,14.8,76.6
    C-123.1,528.7-128.5,555.5-139.2,580.8z"/>
<g>
    <path class="st0" d="M192,748.5c-66.1,0-128.3-25.7-175-72.5c-46.7-46.7-72.5-108.9-72.5-175c0-66.1,25.7-128.3,72.5-175
        c46.7-46.7,108.9-72.5,175-72.5c66.1,0,128.3,25.7,175,72.5c46.7,46.7,72.5,108.9,72.5,175c0,66.1-25.7,128.3-72.5,175
        C320.3,722.8,258.1,748.5,192,748.5z M192,278.5C69.3,278.5-30.5,378.3-30.5,501c0,122.7,99.8,222.5,222.5,222.5
        c122.7,0,222.5-99.8,222.5-222.5C414.5,378.3,314.7,278.5,192,278.5z"/>
</g>
<g>
    <path class="st0" d="M192,604.5L67.5,479.9c-7.8-7.8-7.8-20.5,0-28.3c7.8-7.8,20.5-7.8,28.3,0l96.3,96.3l96.3-96.3
        c7.8-7.8,20.5-7.8,28.3,0c7.8,7.8,7.8,20.5,0,28.3L192,604.5z"/>
</g>
</svg>

我尝试将 svg 与 id="svgbutton"相关联，但我不知道是否应该将它放入 HTML 中的“img src”或 SVG 代码本身。

无论如何，我尝试了这两个，但它没有像#svgbutton {fill:red} 那样工作有耐心的人可以帮我解释一下吗？

谢谢!(抱歉英语不好)

Answer 1

使用 .st0:hover 将允许您在白色部分直接悬停时更改填充:

body {
  background: black;
}

.st0 {
  fill: #FFFFFF;
}

.st0:hover {
  fill: red;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-58 251 500 500" style="enable-background:new -58 251 500 500;" xml:space="preserve">
<path id="svgbutton" d="M-328,271.1c-127,0-229.9,102.9-229.9,229.9S-455,730.9-328,730.9S-98.1,628-98.1,501S-201,271.1-328,271.1z M-139.2,580.8
    c-10.3,24.4-25.1,46.3-43.9,65.1c-18.8,18.8-40.7,33.6-65.1,43.9c-25.3,10.7-52.1,16.1-79.8,16.1s-54.5-5.4-79.8-16.1
    c-24.4-10.3-46.3-25.1-65.1-43.9c-18.8-18.8-33.6-40.7-43.9-65.1c-10.7-25.3-16.1-52.1-16.1-79.8c0-26.5,5-52.3,14.8-76.6l0,0l0,0
    l181.3,181.3c2.3,2.4,5.5,3.7,8.8,3.7s6.4-1.4,8.8-3.7l181.3-181.2l0.2-0.2c0,0,0,0,0,0.1c9.8,24.3,14.8,50.1,14.8,76.6
    C-123.1,528.7-128.5,555.5-139.2,580.8z"/>
<g>
    <path class="st0" d="M192,748.5c-66.1,0-128.3-25.7-175-72.5c-46.7-46.7-72.5-108.9-72.5-175c0-66.1,25.7-128.3,72.5-175
        c46.7-46.7,108.9-72.5,175-72.5c66.1,0,128.3,25.7,175,72.5c46.7,46.7,72.5,108.9,72.5,175c0,66.1-25.7,128.3-72.5,175
        C320.3,722.8,258.1,748.5,192,748.5z M192,278.5C69.3,278.5-30.5,378.3-30.5,501c0,122.7,99.8,222.5,222.5,222.5
        c122.7,0,222.5-99.8,222.5-222.5C414.5,378.3,314.7,278.5,192,278.5z"/>
</g>
<g>
    <path class="st0" d="M192,604.5L67.5,479.9c-7.8-7.8-7.8-20.5,0-28.3c7.8-7.8,20.5-7.8,28.3,0l96.3,96.3l96.3-96.3
        c7.8-7.8,20.5-7.8,28.3,0c7.8,7.8,7.8,20.5,0,28.3L192,604.5z"/>
</g>
</svg>

但是，当内部黑色部分也悬停时，您可能希望它改变颜色。在这种情况下，您正在寻找 svg:hover .st0:

body {
  background: black;
}

.st0 {
  fill: #FFFFFF;
}

svg:hover .st0 {
  fill: red;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-58 251 500 500" style="enable-background:new -58 251 500 500;" xml:space="preserve">
<path id="svgbutton" d="M-328,271.1c-127,0-229.9,102.9-229.9,229.9S-455,730.9-328,730.9S-98.1,628-98.1,501S-201,271.1-328,271.1z M-139.2,580.8
    c-10.3,24.4-25.1,46.3-43.9,65.1c-18.8,18.8-40.7,33.6-65.1,43.9c-25.3,10.7-52.1,16.1-79.8,16.1s-54.5-5.4-79.8-16.1
    c-24.4-10.3-46.3-25.1-65.1-43.9c-18.8-18.8-33.6-40.7-43.9-65.1c-10.7-25.3-16.1-52.1-16.1-79.8c0-26.5,5-52.3,14.8-76.6l0,0l0,0
    l181.3,181.3c2.3,2.4,5.5,3.7,8.8,3.7s6.4-1.4,8.8-3.7l181.3-181.2l0.2-0.2c0,0,0,0,0,0.1c9.8,24.3,14.8,50.1,14.8,76.6
    C-123.1,528.7-128.5,555.5-139.2,580.8z"/>
<g>
    <path class="st0" d="M192,748.5c-66.1,0-128.3-25.7-175-72.5c-46.7-46.7-72.5-108.9-72.5-175c0-66.1,25.7-128.3,72.5-175
        c46.7-46.7,108.9-72.5,175-72.5c66.1,0,128.3,25.7,175,72.5c46.7,46.7,72.5,108.9,72.5,175c0,66.1-25.7,128.3-72.5,175
        C320.3,722.8,258.1,748.5,192,748.5z M192,278.5C69.3,278.5-30.5,378.3-30.5,501c0,122.7,99.8,222.5,222.5,222.5
        c122.7,0,222.5-99.8,222.5-222.5C414.5,378.3,314.7,278.5,192,278.5z"/>
</g>
<g>
    <path class="st0" d="M192,604.5L67.5,479.9c-7.8-7.8-7.8-20.5,0-28.3c7.8-7.8,20.5-7.8,28.3,0l96.3,96.3l96.3-96.3
        c7.8-7.8,20.5-7.8,28.3,0c7.8,7.8,7.8,20.5,0,28.3L192,604.5z"/>
</g>
</svg>

希望对您有所帮助! :)