React中如何实现悬停文本时按图示顺序绘制线条动画

你可以通过「SVG路径描边动画 + React状态控制」实现需求，步骤如下：

• 首先修正现有代码的语法错误：事件名ohMouseOver拼写错误，应为React标准的onMouseOver，同时setMenu回调的括号未闭合，修正后的基础文本元素代码如下：

<span onMouseOver={() => setMenu("design")} className="design">
  ARCHITECTRURE DESIGN
</span>

• 将文本元素和后续绘线用的SVG画布包裹在同一个相对定位的容器内，保证线条位置和设计稿对齐，SVG设置为绝对定位、不响应鼠标事件，避免遮挡文本的交互：

<div className="design-wrap" style={{position: 'relative'}}>
  <span onMouseOver={() => setMenu("design")} className="design">
    ARCHITECTRURE DESIGN
  </span>
  <svg className="line-canvas" style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none'}}>
    {/* 按绘制顺序放置所有线条路径，替换为你实际描点生成的path d属性值 */}
    <path className="draw-line" d="M10 10 L100 10" /> {/* 对应参考图编号2的第一条线 */}
    <path className="draw-line" d="M100 10 L100 50" />
    <path className="draw-line" d="M100 50 L200 50" />
    {/* 剩余线条按顺序追加即可 */}
  </svg>
</div>

• 编写CSS描边动画逻辑，核心通过stroke-dasharray和stroke-dashoffset实现画线效果，默认动画暂停，鼠标悬停在容器上时按顺序启动动画：

.draw-line {
  fill: none;
  stroke: #333; /* 替换为你需要的线条颜色 */
  stroke-width: 2;
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation: drawLine 0.5s ease forwards;
  animation-play-state: paused;
}

/* 鼠标悬停时启动所有线条动画 */
.design-wrap:hover .draw-line {
  animation-play-state: running;
}

/* 按绘制顺序给每条线设置延迟，实现依次绘制的效果 */
.draw-line:nth-of-type(1) { animation-delay: 0s; }
.draw-line:nth-of-type(2) { animation-delay: 0.25s; }
.draw-line:nth-of-type(3) { animation-delay: 0.5s; }
/* 后续线条按间隔累加延迟时间即可 */

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

• 最后在组件挂载完成后，批量获取所有绘线路径的实际长度，给对应path的--path-length变量赋值即可，不需要手动计算路径长度：

// 组件useEffect/挂载生命周期内执行
const paths = document.querySelectorAll('.draw-line');
paths.forEach(path => {
  const length = path.getTotalLength();
  path.style.setProperty('--path-length', length);
});

补充说明：如果需要鼠标移出时线条反向擦除，可以额外加mouseleave事件监听，给路径添加反向动画类，将stroke-dashoffset改回路径总长度即可。如果需要和你现有的menu状态联动，也可以不使用CSS的:hover触发，改为监听span的onMouseEnter/onMouseLeave事件，通过状态给SVG动态添加/移除动画播放类名，灵活度更高。

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