在 <img> 标签中为 svg 创建悬停效果的正确方法是什么？

【问题标题】：What is the correct way to create a hover effect for and svg in an <img> tag?在 <img> 标签中为 svg 创建悬停效果的正确方法是什么？
【发布时间】：2023-01-10 16:21:23
【问题描述】：

为嵌入在 ing 标签中的 SVG 添加悬停效果的正确方法是什么？这能纯粹靠CSS来实现吗？

如果不是，嵌入具有悬停效果的 SVG 图标的正确 HTML 语义方法是什么？

谢谢

【问题讨论】：

考虑单独使用 <svg> 标签，而不是嵌入 <img> 标签内
谢谢，对于导航图标的可访问性，首选标签是什么？

标签： css svg hover icons

【解决方案1】：

您必须使用 <svg> 标签而不是 <img>。

您可以检查 SVG Vectors 以获得您想要的 SVG 类型 here。

为您分享一个悬停示例。

.html

<div>
  
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z">
    </path>
  </svg>
  
</div>

.css

svg {
  width: 70px;
  height: 70px;
}
svg:hover {
  fill: red;
}

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

为您提供所需的输出类型。

【讨论】：