SVG Logo绘制动画问题：线条间隙与填充动画异常求助

先修正代码基础错误 #

你写的SVG属性存在拼写错误，这是导致渲染异常的诱因之一：

• 将path里的stroke:改为stroke=（SVG属性赋值用等号而非冒号）
• stroke-minerlimit是stroke-miterlimit的笔误，修正后才能正确处理线条转角渲染，减少间隙

解决线条间隙问题 #

统一设置stroke-dasharray:10000不合理，因为每个path的实际长度不同，会导致部分路径的虚线和间隙匹配出错。正确做法是给每个path单独计算长度：

1. 用JS获取每个path的实际长度并设置自定义属性：

document.querySelectorAll('.outline, .circle').forEach(path => {
  const length = path.getTotalLength();
  path.style.setProperty('--length', length);
  path.style.strokeDasharray = length;
  path.style.strokeDashoffset = length;
});

2. 修改CSS动画，让每个路径基于自身长度动效：

.svg-logo .outline, .svg-logo .circle {
  animation: 15s write forwards;
}

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

额外给path加上stroke-linecap: round和stroke-linejoin: round，能让线条连接处更平滑，进一步减少间隙感。

解决填充动画异常问题 #

初始将fill设为透明，在绘制动画接近结束时逐步显示填充：

1. 给path设置初始样式：

.svg-logo .outline, .svg-logo .circle {
  fill: transparent;
  stroke: white;
  stroke-opacity: .5;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}

2. 新增填充动画与绘制动画同步：

.svg-logo .outline, .svg-logo .circle {
  animation: 15s write forwards, 1s fillIn 14s forwards;
}

@keyframes fillIn {
  to {
    fill: white;
  }
}

这里设置14s延迟，让填充在绘制动画最后1秒启动，刚好和绘制结束同步出现，避免突兀感。

分层处理替代方案 #

如果上述方法仍有问题，可将Logo分为两层处理：

• 底层是填充好的纯色Logo，初始透明
• 上层是描边的Logo，做绘制动画
• 等上层绘制完成后，显示底层填充Logo，同时隐藏上层描边

示例代码：

<div class="box">
  <svg class="svg-logo-filled" width="740" height="454" viewBox="0 0 740 454">
    <path class="outline" d="*SVG PATH*" fill="white"></path>
    <path class="outline" d="*SVG PATH*" fill="white"></path>
    <path class="circle" d="*SVG PATH*" fill="white"></path>
    <path class="circle" d="*SVG PATH*" fill="white"></path>
  </svg>
  <svg class="svg-logo-stroke" width="740" height="454" viewBox="0 0 740 454">
    <path class="outline" d="*SVG PATH*" stroke="white" stroke-opacity=".5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
    <path class="outline" d="*SVG PATH*" stroke="white" stroke-opacity=".5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
    <path class="circle" d="*SVG PATH*" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
    <path class="circle" d="*SVG PATH*" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
  </svg>
</div>

.box {
  position: relative;
}
.svg-logo-filled, .svg-logo-stroke {
  position: absolute;
  max-width:700px;
  top: 100px;
}
.svg-logo-filled {
  opacity: 0;
  animation: showFill 1s 15s forwards;
}
.svg-logo-stroke .outline, .svg-logo-stroke .circle {
  stroke-dasharray: var(--length);
  stroke-dashoffset: var(--length);
  animation: 15s write forwards;
}
@keyframes write {
  to { stroke-dashoffset: 0; }
}
@keyframes showFill {
  to { opacity: 1; }
}

别忘了加上之前的JS代码计算每个path的长度。

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