如何使用Tailwind实现SVG图标悬停时的填充动画效果

最终可运行代码 #

<section class="bg-black flex justify-center items-center min-h-screen">
  <a href="#" class="flex items-center justify-center w-1/2 group overflow-hidden relative">
    <!-- 底层常驻半透明箭头 -->
    <svg class="w-full h-full opacity-25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 41" fill="none">
      <title>Arrow Right Large Icon</title>
      <path d="M39.813 37.806l15.312-17.018L39.813 3.775M56.5 20.787H.5" stroke="#FFF" stroke-width="8"></path>
    </svg>
    <!-- hover时滑入的实心箭头 -->
    <svg class="absolute left-0 top-0 w-full h-full -translate-x-full group-hover:translate-x-0 transition-all duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 41" fill="none">
      <title>Arrow Right Large Icon</title>
      <path d="M39.813 37.806l15.312-17.018L39.813 3.775M56.5 20.787H.5" stroke="#FFF" stroke-width="8"></path>
    </svg>
  </a>
</section>

核心修改说明 #

• 给父级a标签新增overflow-hidden和relative属性：overflow-hidden作为动画裁切蒙版，避免箭头滑入时超出容器边界显示；relative作为顶层绝对定位箭头的定位基准
• 简化多余嵌套的div容器，直接用两个svg分层实现效果，避免位移属性传递冲突
• 调整动画逻辑：底层半透箭头固定显示，顶层实心箭头初始通过-translate-x-full隐藏在容器左侧外，hover时通过group-hover:translate-x-0滑入到正常位置，完全匹配目标动效
• 移除了Tailwind默认不存在的z-100无效类，给section新增flex min-h-screen属性方便预览效果

内容的提问来源于stack exchange，提问作者Dom V