问题：

鼠标悬停在SVG改变颜色[重复]

施俊驰

2023-03-14

我在HTML中添加了SVG。我想做的是，当鼠标悬停在SVG上时，将其更改为淡黄色，转换为1s。

HTML中的CSS是：

.svg {
    width: 17px;
    height: 99px;
}

超文本标记语言的内容：

<body>
<img src="raptor.svg" class="svg" />
</body>

猛禽。svg内容如下：

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 17.17 99.37">
    <style>
    #content path {
        fill: #F00;
        transition: 1s;
    }
    #content:hover path {
        fill: #E2C650;
    }
    </style>
    <g id="Layer_2" data-name="Layer 2">
        <g id="content">
            <path class="characters" d="M.34,99.37V92.43a8,8,0,0,1,1.41-4.88A4.9,4.9,0,0,1,6,85.64a5.31,5.31,0,0,1,2.56.59,5,5,0,0,1,1.81,1.64l6.5-3.64v5.12L11.64,92V95h5.19v4.41Zm3.47-6.79V95H8.17V92.53a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,90.2a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,92.58Z" />
            <path class="characters" d="M.34,73.15,16.64,67l.44,4.34-3.49,1.19v5.7l3.25,1.14v4.39L.34,77.56Zm5.29,2.28L10.11,77V73.78Z" />
            <path class="characters" d="M16.83,60.39v4.41H.34V57.87A8.55,8.55,0,0,1,1,54.44,5.55,5.55,0,0,1,3,52a5.69,5.69,0,0,1,3.26-.91,5.18,5.18,0,0,1,3.19,1,5.78,5.78,0,0,1,1.93,2.56A9.28,9.28,0,0,1,12,58.06v2.33ZM3.81,58v2.38H8.56V58a2.27,2.27,0,0,0-.65-1.67,2.21,2.21,0,0,0-1.63-.65,2.51,2.51,0,0,0-1.79.64A2.27,2.27,0,0,0,3.81,58Z" />
            <path class="characters" d="M3.81,35.82v5.26h13V45.5h-13v4.85H.34V36.23Z" />
            <path class="characters" d="M0,26.34a8.92,8.92,0,0,1,1.12-4.55,7.58,7.58,0,0,1,3.06-3,9.06,9.06,0,0,1,4.32-1A9.24,9.24,0,0,1,13,18.88a7.74,7.74,0,0,1,3.08,3,8.82,8.82,0,0,1,1.1,4.44A8.75,8.75,0,0,1,16,30.84a7.74,7.74,0,0,1-3.07,3,9,9,0,0,1-4.32,1,9.1,9.1,0,0,1-4.48-1.09,7.82,7.82,0,0,1-3.08-3A8.72,8.72,0,0,1,0,26.34Zm8.63,4a5.52,5.52,0,0,0,3.49-1.06,3.47,3.47,0,0,0,1.36-2.9,3.67,3.67,0,0,0-1.3-2.9,5.47,5.47,0,0,0-3.7-1.13A5.35,5.35,0,0,0,5,23.42a3.7,3.7,0,0,0-.73,4.9,4.34,4.34,0,0,0,1.75,1.46A5.86,5.86,0,0,0,8.63,30.32Z" />
            <path class="characters" d="M.34,15.13V8.2A8,8,0,0,1,1.75,3.32,4.9,4.9,0,0,1,6,1.41,5.31,5.31,0,0,1,8.53,2a5,5,0,0,1,1.81,1.64L16.83,0V5.12L11.64,7.79v2.93h5.19v4.41ZM3.81,8.34v2.38H8.17V8.29a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,6a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,8.34Z" />
        </g>
    </g>
</svg>

或者，我尝试使用CSS在鼠标移动期间改变颜色：

.svg:hover {
    color: #E2C650;
}

它也不能工作，因为CSS属性不能更改SVG填充颜色。

我错过了什么？我必须使用内联SVG吗？

共有2个答案

娄浩荡

2023-03-14

如果您将鼠标悬停在SVG路径的任何部分上，我可以看到这种工作非常愉快。

如果您希望在将鼠标悬停在SVG本身的任何部分（而不仅仅是路径）上时也导致转换，请添加以下CSS：

svg:hover #content path {
  fill: #E2C650;
}

这里有一个工作片段：

css prettyprint-override">svg {
  width: 17px;
  height: 99px;
}

svg:hover #content path {
    fill: #E2C650;
}

#content path {
    fill: #F00;
    transition: 1s;
}

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 17.17 99.37">
    <g id="Layer_2" data-name="Layer 2">
        <g id="content">
            <path class="characters" d="M.34,99.37V92.43a8,8,0,0,1,1.41-4.88A4.9,4.9,0,0,1,6,85.64a5.31,5.31,0,0,1,2.56.59,5,5,0,0,1,1.81,1.64l6.5-3.64v5.12L11.64,92V95h5.19v4.41Zm3.47-6.79V95H8.17V92.53a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,90.2a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,92.58Z" />
            <path class="characters" d="M.34,73.15,16.64,67l.44,4.34-3.49,1.19v5.7l3.25,1.14v4.39L.34,77.56Zm5.29,2.28L10.11,77V73.78Z" />
            <path class="characters" d="M16.83,60.39v4.41H.34V57.87A8.55,8.55,0,0,1,1,54.44,5.55,5.55,0,0,1,3,52a5.69,5.69,0,0,1,3.26-.91,5.18,5.18,0,0,1,3.19,1,5.78,5.78,0,0,1,1.93,2.56A9.28,9.28,0,0,1,12,58.06v2.33ZM3.81,58v2.38H8.56V58a2.27,2.27,0,0,0-.65-1.67,2.21,2.21,0,0,0-1.63-.65,2.51,2.51,0,0,0-1.79.64A2.27,2.27,0,0,0,3.81,58Z" />
            <path class="characters" d="M3.81,35.82v5.26h13V45.5h-13v4.85H.34V36.23Z" />
            <path class="characters" d="M0,26.34a8.92,8.92,0,0,1,1.12-4.55,7.58,7.58,0,0,1,3.06-3,9.06,9.06,0,0,1,4.32-1A9.24,9.24,0,0,1,13,18.88a7.74,7.74,0,0,1,3.08,3,8.82,8.82,0,0,1,1.1,4.44A8.75,8.75,0,0,1,16,30.84a7.74,7.74,0,0,1-3.07,3,9,9,0,0,1-4.32,1,9.1,9.1,0,0,1-4.48-1.09,7.82,7.82,0,0,1-3.08-3A8.72,8.72,0,0,1,0,26.34Zm8.63,4a5.52,5.52,0,0,0,3.49-1.06,3.47,3.47,0,0,0,1.36-2.9,3.67,3.67,0,0,0-1.3-2.9,5.47,5.47,0,0,0-3.7-1.13A5.35,5.35,0,0,0,5,23.42a3.7,3.7,0,0,0-.73,4.9,4.34,4.34,0,0,0,1.75,1.46A5.86,5.86,0,0,0,8.63,30.32Z" />
            <path class="characters" d="M.34,15.13V8.2A8,8,0,0,1,1.75,3.32,4.9,4.9,0,0,1,6,1.41,5.31,5.31,0,0,1,8.53,2a5,5,0,0,1,1.81,1.64L16.83,0V5.12L11.64,7.79v2.93h5.19v4.41ZM3.81,8.34v2.38H8.17V8.29a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,6a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,8.34Z" />
        </g>
    </g>
</svg>

沈乐邦

2023-03-14

您可以在DOM中使用PlaceSVG，而不是在img标记中使用svg。这应该行得通。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    svg {
      width: 17px;
      height: 99px;
    }
  </style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 17.17 99.37">
    <style>
    #content path {
        fill: #F00;
        transition: 1s;
    }
    #content:hover path {
        fill: #E2C650;
    }
    </style>
    <g id="Layer_2" data-name="Layer 2">
        <g id="content">
            <path class="characters" d="M.34,99.37V92.43a8,8,0,0,1,1.41-4.88A4.9,4.9,0,0,1,6,85.64a5.31,5.31,0,0,1,2.56.59,5,5,0,0,1,1.81,1.64l6.5-3.64v5.12L11.64,92V95h5.19v4.41Zm3.47-6.79V95H8.17V92.53a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,90.2a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,92.58Z" />
            <path class="characters" d="M.34,73.15,16.64,67l.44,4.34-3.49,1.19v5.7l3.25,1.14v4.39L.34,77.56Zm5.29,2.28L10.11,77V73.78Z" />
            <path class="characters" d="M16.83,60.39v4.41H.34V57.87A8.55,8.55,0,0,1,1,54.44,5.55,5.55,0,0,1,3,52a5.69,5.69,0,0,1,3.26-.91,5.18,5.18,0,0,1,3.19,1,5.78,5.78,0,0,1,1.93,2.56A9.28,9.28,0,0,1,12,58.06v2.33ZM3.81,58v2.38H8.56V58a2.27,2.27,0,0,0-.65-1.67,2.21,2.21,0,0,0-1.63-.65,2.51,2.51,0,0,0-1.79.64A2.27,2.27,0,0,0,3.81,58Z" />
            <path class="characters" d="M3.81,35.82v5.26h13V45.5h-13v4.85H.34V36.23Z" />
            <path class="characters" d="M0,26.34a8.92,8.92,0,0,1,1.12-4.55,7.58,7.58,0,0,1,3.06-3,9.06,9.06,0,0,1,4.32-1A9.24,9.24,0,0,1,13,18.88a7.74,7.74,0,0,1,3.08,3,8.82,8.82,0,0,1,1.1,4.44A8.75,8.75,0,0,1,16,30.84a7.74,7.74,0,0,1-3.07,3,9,9,0,0,1-4.32,1,9.1,9.1,0,0,1-4.48-1.09,7.82,7.82,0,0,1-3.08-3A8.72,8.72,0,0,1,0,26.34Zm8.63,4a5.52,5.52,0,0,0,3.49-1.06,3.47,3.47,0,0,0,1.36-2.9,3.67,3.67,0,0,0-1.3-2.9,5.47,5.47,0,0,0-3.7-1.13A5.35,5.35,0,0,0,5,23.42a3.7,3.7,0,0,0-.73,4.9,4.34,4.34,0,0,0,1.75,1.46A5.86,5.86,0,0,0,8.63,30.32Z" />
            <path class="characters" d="M.34,15.13V8.2A8,8,0,0,1,1.75,3.32,4.9,4.9,0,0,1,6,1.41,5.31,5.31,0,0,1,8.53,2a5,5,0,0,1,1.81,1.64L16.83,0V5.12L11.64,7.79v2.93h5.19v4.41ZM3.81,8.34v2.38H8.17V8.29a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,6a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,8.34Z" />
        </g>
    </g>
</svg>
</body>
</html>

类似资料：

如何在悬停时改变svg颜色

每一个，我都在使用angular并且我有一个svg，html，比如：这是svg源代码filter_default：我想知道当鼠标悬停时如何改变svg的颜色，谢谢大家的帮助！
如何使用鼠标悬停使圆改变颜色

我想设置一个圆圈网格（非重叠），以便当鼠标指针位于其中一个圆圈上时，该圆圈会改变颜色。我已经尝试过，到目前为止有两种选择： > 使用容器，例如JPanel。使用MouseMotionListener.mouseMoved（MouseEvent e）始终获取鼠标指针的x和y坐标。然后，如果坐标位于其中一个圆圈内，请使用repaint（）重新绘制整个容器。将每个圆设置为一个容器。使用mouse li
悬停时改变颜色

只是尝试在CSS中练习悬停和下拉。在下面的代码中，我希望每当下拉子div（带有Home1文本的绿色div)悬停在上面时，的背景色（红色）应该更改为蓝色。会很感激你的帮助。 null null
将鼠标悬停时的按钮字体颜色更改为每个按钮标签（不在CSS中）上声明的“鼠标悬停颜色”

这不是一个重复的问题——我不想简单地更改CSS中的字体颜色。我的问题是：我有颜色的产品。蓝色、红色、绿色、黄色、紫色——任何颜色。我有一个同样颜色的盒子- 在这个盒子里我有一个按钮“买” 我可以创建这个按钮动态-与框的颜色相同。如果框为蓝色，则按钮为蓝色，带有白色边框和白色字体颜色。如果框为红色-按钮为红色，带有白色边框和白色字体颜色。 CSS（反转按钮）：但在盘旋中按钮变为白色，字
在React中的img悬停时填充svg颜色[重复]

有人能帮我改变悬停时svg的颜色吗，所以我的jsx就像我导入img的地方一样然后在我的css文件中，我以类infoIcon为目标，如下所示我可以看到光标变成了指针，但我的颜色没有改变为什么？
如何改变字体超赞图标悬停颜色？

目前我的html如下所示：我尝试执行以下CSS，但没有任何结果：

鼠标悬停在SVG改变颜色[重复]

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档