Question

有我的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>

我需要制作一个动画，看起来像是手绘这个圆圈（线条动画），我知道必须在中风的帮助下制作它，但是路径会丢失它的原始形状，所以我想要有生命的原始形状（路径）就像中风一样。

Answer 1

你可以在白色笔划的顶部放置一条更简单的路径，然后使用第二条路径的stroke-dasharray做一个显示下面路径的动画。

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

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

1 个答案: