将鼠标悬停在SVG上以更改颜色

时间：2019-12-06 10:16:44

标签： html css svg

我在HTML中添加了SVG。我想做的是，当鼠标悬停SVG时，将其更改为淡黄色，过渡时间为1秒。

HTML中的CSS是：

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

HTML内容：

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

raptor.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;
}

它不能正常工作，因为color CSS属性无法更改SVG填充颜色。

我想念什么？我必须使用内联SVG吗？

2 个答案:

答案 0 :(得分：1)

如果您将鼠标悬停在SVG path的任何部分上，我会很高兴地看到它。

如果您还希望将鼠标悬停在 SVG本身的任何部分上，而不仅仅是路径，那么请添加以下CSS：

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

这是一个有效的代码段：

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>

答案 1 :(得分：1)

您可以在DOM中使用svg代替在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>
相关问题
最新问题