如何实现类似Deno官网的SVG路径动画效果？

核心原理 #

这类SVG描边动画的核心是利用**stroke-dasharray和stroke-dashoffset**两个CSS属性，配合CSS动画实现路径的"绘制"效果：

• stroke-dasharray：定义虚线的分段长度，当值等于路径总长度时，整个路径会变成一段"隐藏"的虚线（线段长度等于路径长度，间隙也等于路径长度）
• stroke-dashoffset：控制虚线的偏移量，通过从路径长度逐渐变为0，让路径逐步显示出来

实现步骤 #

1. 准备SVG路径

   • 确保目标路径的fill设为none（只显示描边），设置合适的stroke颜色和stroke-width
   • 如果是复杂图标（比如Deno的logo），可以直接导出对应的SVG路径，简化不必要的节点

2. 获取路径总长度

   • 用JavaScript的getTotalLength()方法获取SVG路径的实际长度，将其存入CSS变量方便复用
   • 也可以直接在浏览器控制台计算后，把数值硬写到CSS里

3. 编写动画逻辑

   • 初始状态下，让stroke-dasharray和stroke-dashoffset都等于路径总长度，此时路径完全隐藏
   • 通过CSS动画将stroke-dashoffset从路径长度过渡到0，实现描边绘制效果

代码示例 #

HTML（简化版Deno Logo路径）

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path id="denoLogo" 
        d="M100,20 C150,20 180,60 180,100 C180,140 150,180 100,180 C50,180 20,140 20,100 C20,60 50,20 100,20 Z M100,60 C80,60 70,80 70,100 C70,120 80,140 100,140 C120,140 130,120 130,100 C130,80 120,60 100,60 Z"
        fill="none" stroke="#3772FF" stroke-width="4" />
</svg>

CSS

#denoLogo {
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  /* 动画时长、缓动效果可按需调整 */
  animation: drawLogo 2s ease-in-out forwards;
}

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

JavaScript（动态计算路径长度）

const logoPath = document.getElementById('denoLogo');
const totalLength = logoPath.getTotalLength();
// 将路径长度存入CSS变量
logoPath.style.setProperty('--path-length', totalLength);

扩展效果 #

• 循环动画：把forwards改成infinite，再添加反向动画，实现路径反复绘制消失的效果
• 多路径顺序动画：给多个路径设置不同的animation-delay，实现依次绘制的层次感
• 变速动画：在@keyframes中设置多个关键帧，调整不同阶段的stroke-dashoffset值，实现快慢变化的绘制节奏

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