Question

从adobe xd创建svg并尝试为svg创建悬停效果可以在悬停时更改填充：颜色。

＃继承人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>

#Heres html代码＃

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

#Heres the css code＃

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才能看到图标。

将鼠标悬停在svg文本上无效

1 个答案: