是否可以在不使用 stroke 的情况下为 SVG 路径设置动画？ [复制]答案

【问题标题】：Is it possible to animate SVG path without use of stroke ? [duplicate]是否可以在不使用 stroke 的情况下为 SVG 路径设置动画？ [复制]
【发布时间】：2016-04-02 11:20:33
【问题描述】：

这是我的 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>

我需要制作一个动画，看起来像手绘这个圆圈（线条动画），我知道必须借助描边来制作它，但路径会失去它的原始形状，所以我想要动画原始形状（ path) 的方式与中风类似。

【问题讨论】：

标签： javascript html css svg

【解决方案1】：

您可以用白色笔划在该路径之上放置一条更简单的路径，并使用第二条路径的 stroke-dasharray 来制作显示下方路径的动画。

更简单地说，我的意思是第二条路径将只有一个笔划并且没有填充。只需确保 stroke-width 足够宽以覆盖下方路径的最宽部分即可。

【讨论】：