是否可以在不使用笔划的情况下设置SVG路径的动画

Is it possible to animate SVG path without use of stroke ?

本文关键字：情况下 设置 SVG 动画 路径 是否      更新时间：2023-09-26

有我的svg:

<svg class="num-frame" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="326.229px" height="242.623px" viewBox="0 0 326.229 242.623" enable-background="new 0 0 326.229 242.623" xml:space="preserve">
  <g id="Layer_1">
    <g id="Layer_1_1_">
      <path class="pathe" stroke-width="4" d="M268.971,60.112c-82.83-148.908-248.519,111.12-145.339,150.875c80.484,30.996,200.946-39.396,168.728-132.591
      	C261.292-11.486,94.387,6.078,87.437,102.417c-7.715,106.967,139.807,153.589,213.991,93.134c0.709-0.575-0.242-1.804-0.982-1.27
      	c-59.93,43.702-153.784,28.327-194.988-34.033c-36.732-55.58,0.429-114.795,58.131-131.517
      	C223.1,11.48,289.667,41.227,294.159,107.434c4.34,63.967-59.375,93.766-112.195,103.209
      	c-33.778,6.039-74.836,1.325-84.991-36.949c-7.695-28.985,5.878-62.127,19.867-86.895c34.6-61.241,105.552-97.912,150.95-26
      	C268.258,61.552,269.403,60.889,268.971,60.112L268.971,60.112z" />
    </g>
  </g>
</svg>

我需要制作一个动画，看起来像手绘这个圆（线条动画），我知道必须借助笔划来制作，但路径会失去它的原始形状，所以我想用笔划的方式来制作原始形状（路径）的动画。

您可以在带有白色笔划的路径之上放置一个更简单的路径，并使用第二个路径的笔划dasharray来制作显示下面路径的动画。

更简单地说，我的意思是第二条路径只有一个笔划，没有填充。只要确保笔划宽度足够宽，可以覆盖下面路径的最宽部分。

相关文章：