将鼠标悬停在svg文本上不起作用

Question

从Adobe XD创建svg并尝试为svg创建悬停效果可能会更改fill：悬停时的颜色。

＃这是svg代码＃

<svg xmlns="http://www.w3.org/2000/svg" viewBox="1563 3492 45 45">
  <defs>
    <style>
      .cls-1 {
        fill: #79bf73;
        font-size: 45px;
        font-family: SegoeMDL2Assets, Segoe MDL2 Assets;
      }
    </style>
  </defs>
  <text id="E1CC" class="cls-1" transform="translate(1563 3537)"><tspan x="0" y="0"></tspan></text>
</svg>

＃这是html代码＃

<div class="play">
   <img src="http:localhost/mockup3/images/E101.svg" height="42" width="42">
</div>

＃这是CSS代码＃

svg text #E101:hover{

    fill: #003565;
}

Answer 1

插入为img SVG无法交互，它们的行为就像图像。 要解决此问题，只需将完整的SVG代码放入内联即可。 由于这些工具通常会产生难看的代码，因此需要对代码进行一些清理。

的HTML

<div class="play">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="1563 3492 45 45" width="42" height="42">
    <text id="E1CC" class="cls-1" transform="translate(1563 3537)"><tspan x="0" y="0"></tspan></text>
  </svg>
</div>

的CSS

svg text {
    fill: #79bf73;
    font-size: 45px;
    font-family: SegoeMDL2Assets, Segoe MDL2 Assets;
}

svg text:hover{
    fill: #003565;
}

请记住，该图标仅在安装了Segoe MDL2 Assets字体Segoe MDL2 Assets可见。