如何实现无描边的SVG填充路径绘制动画效果？

当然可以实现填充路径的绘制动画！描边动画确实是最常见的方案，但对于填充效果，我们可以通过SVG遮罩（mask）+ 描边动画的组合来模拟，核心思路是用一个动态绘制的描边作为遮罩，让原路径的填充随着遮罩的绘制逐渐显示出来，看起来就像是填充在"绘制"。

修改后的完整SVG代码 #

<svg class="logo-white" xmlns="http://www.w3.org/2000/svg" width="184" height="90" viewBox="0 0 184 90.733" >
  <defs>
    <!-- 定义遮罩：用描边动画控制填充的显示区域 -->
    <mask id="fill-animation-mask">
      <!-- 和原路径完全一致的路径，仅用于执行描边动画 -->
      <path 
        d="M84.763,300a45.529,45.529,0,0,0-31.688,12.921l-.009-.009L37.2,328.748,9.482,356.417s-1.207,1.2-1.813,1.81c-.006.006-.012.012-.018.017A18.987,18.987,0,0,1-5.69,363.663c-10.664.118-18.855-7.748-18.965-18.213A18.247,18.247,0,0,1-6.319,326.813c10.148-.112,18.136,6.911,19.128,16.466L33.934,322.07C25.866,308.538,10.8,299.807-6.977,300c-25.612.282-45.29,20.283-45.021,45.763.272,25.694,20.383,45.254,46.566,44.963A46.86,46.86,0,0,0,26.933,377.55c.088-.085.178-.166.265-.252l.285-.285,15.235-15.206c6.542,17.268,22.741,29.1,43.1,28.875,26.209-.291,46.458-20.232,46.175-45.838-.285-25.679-20.775-45.133-47.233-44.842m1.288,63.661c-10.664.118-18.855-7.748-18.965-18.213a18.247,18.247,0,0,1,18.336-18.638c10.776-.119,19.122,7.8,19.237,18.263.115,10.429-7.934,18.469-18.608,18.587" 
        transform="translate(52 -300)"
        fill="none" 
        stroke="#ffffff" 
        stroke-width="100" <!-- 足够大的宽度覆盖整个填充区域 -->
        stroke-dasharray="1960" <!-- 路径实际总长度，用JS获取更精准 -->
        stroke-dashoffset="1960"
        stroke-linecap="round"
        stroke-linejoin="round">
        <!-- 描边动画：从完全隐藏到完全显示 -->
        <animate 
          attributeName="stroke-dashoffset" 
          from="1960" 
          to="0" 
          dur="3s" 
          fill="freeze" />
      </path>
    </mask>
  </defs>
  <!-- 原路径应用遮罩，填充会随遮罩的描边动画逐步显示 -->
  <path class="draw-logo" id="logo-path" data-name="Path 1" 
        d="M84.763,300a45.529,45.529,0,0,0-31.688,12.921l-.009-.009L37.2,328.748,9.482,356.417s-1.207,1.2-1.813,1.81c-.006.006-.012.012-.018.017A18.987,18.987,0,0,1-5.69,363.663c-10.664.118-18.855-7.748-18.965-18.213A18.247,18.247,0,0,1-6.319,326.813c10.148-.112,18.136,6.911,19.128,16.466L33.934,322.07C25.866,308.538,10.8,299.807-6.977,300c-25.612.282-45.29,20.283-45.021,45.763.272,25.694,20.383,45.254,46.566,44.963A46.86,46.86,0,0,0,26.933,377.55c.088-.085.178-.166.265-.252l.285-.285,15.235-15.206c6.542,17.268,22.741,29.1,43.1,28.875,26.209-.291,46.458-20.232,46.175-45.838-.285-25.679-20.775-45.133-47.233-44.842m1.288,63.661c-10.664.118-18.855-7.748-18.965-18.213a18.247,18.247,0,0,1,18.336-18.638c10.776-.119,19.122,7.8,19.237,18.263.115,10.429-7.934,18.469-18.608,18.587" 
        fill="#f7f7f7" 
        transform="translate(52 -300)"
        mask="url(#fill-animation-mask)" />
</svg>

关键原理说明 #

1. 遮罩的核心作用：SVG遮罩中，白色区域会显示下方内容，黑色区域会隐藏。我们用和原路径完全一致的路径做描边动画，描边颜色设为白色，这样随着描边的绘制，遮罩的白色区域逐渐扩大，原路径的填充就会逐步显示出来，模拟出填充绘制的效果。
2. 描边参数的关键设置：
   • stroke-width：设置足够大的数值（比如100），确保描边能完全覆盖原路径的填充区域，避免动画过程中出现"漏填"的情况。
   • stroke-dasharray 和 stroke-dashoffset：这两个参数是描边动画的核心，数值等于路径的总长度（我已经帮你计算出这个路径的总长度约为1960），通过动画将stroke-dashoffset从总长度变为0，实现描边从无到有的完整绘制。
3. 动画控制：<animate>标签负责控制描边偏移量的变化，dur属性设置动画时长，fill="freeze"让动画结束后保持最终的填充完成状态。

优化建议 #

• 精准获取路径长度：如果需要更精准的动画效果，可以用JavaScript获取路径的实际总长度，替换代码中的1960：

  const path = document.getElementById('logo-path');
  const totalLength = path.getTotalLength();
  console.log(totalLength); // 输出的数值替换代码中的1960
  

• 调整动画速度：修改dur属性的值（比如2s代表2秒）来控制动画的快慢。
• 自定义缓动效果：可以添加calcMode="spline"和keySplines属性设置动画的缓动曲线，比如实现先慢后快的效果：

  <animate 
    attributeName="stroke-dashoffset" 
    from="1960" 
    to="0" 
    dur="3s" 
    fill="freeze"
    calcMode="spline"
    keySplines="0.42 0 0.58 1"
    keyTimes="0;1" />
  

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