Html 使用顺风在悬停时进行SVG颜色填充

我一直试图让我的svg在悬停时用黑色填充，但似乎做不到

我希望它有这样的黑色轮廓 . 然后像这样填充

这是我希望在悬停时填充它的代码。然而，这并不完全有效。如果我将hover:off从hover:fill current中去掉，那么它将一直填充为黑色

<svg class="h-6 w-6 text-black hover:fill-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
    stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>

---

有什么想法吗？

1-默认情况下，只为填充实用程序生成响应变量。因此，我们需要创建激活所需的变体：fill当前类的悬停状态

2考虑使用颜色类来获得精确的结果。

<svg class="h-6 w-6 text-black hover:fill-current hover:text-black" ... />
</svg>

---

1-默认情况下，仅为填充实用程序生成响应变量。因此，我们需要创建激活所需的变体：fill当前类的悬停状态

2考虑使用颜色类来获得精确的结果。

<svg class="h-6 w-6 text-black hover:fill-current hover:text-black" ... />
</svg>