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

【问题标题】：SVG color hover - can't find any solutionSVG 颜色悬停 - 找不到任何解决方案
【发布时间】：2018-02-22 19:21:54
【问题描述】：

几天来我一直在尝试解决这个问题，我只想在悬停在 SVG 上进行颜色更改（只有 CSS），我找到了很多教程（在并且不在堆栈中）但它们都不适合我。

谁能告诉我该怎么办？这是 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} 那样工作任何有耐心的人可以为我解释一下吗？

谢谢！（抱歉英语不好）

【问题讨论】：

标签： html css svg hover

【解决方案1】：

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

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>

希望这会有所帮助！ :)

【讨论】：

嘿，感谢您的回答，但它对我不起作用 D：您是否将“svg:hover .st0”放入 CSS 或 SVG 代码中？
进入 CSS。它的目标是<svg> 元素本身，所以它必须从你的样式表中运行:)
但是 SVG 文档是否需要与 html 相关联，就像样式表一样？在我的 HTML 中，我没有 svg 标签，我使用“img src”来放置 svg 文件。它有什么不同吗？当我将 st0 {fill:color} 放入样式表时，什么也没有发生。
嘿，黑曜石时代，我做到了！！！！我将 svg 代码直接放入 html 的代码中，并且有效！非常感谢您的帮助，如果您能帮我找到其他方法，例如将悬停编码到 svg 文件中，我将非常感激（我已经）！
很高兴听到你的工作正常 :) SVG 有点棘手，我不相信你可以将悬停代码烘焙到 SVG 本身（因为它需要以 SVG 本身为目标） . 是的，对 SVG 使用 <img src="">确实会有所作为。您必须使用完整的 SVG 代码（不是 <img>）才能调整 SVG fill。一旦您确认这可以解决您的问题，请不要忘记mark it as accepted，点击投票按钮下方的灰色复选标记，将其从“未回答的问题”队列中删除:)