动画SVG路径从0到100％

Question

我要做的是将路径设置为不可见。然后开始绘制它。在这种情况下，是箭头。所以首先，我希望我的箭头不可见，然后开始绘制它。

我了解了这一点，发现了笔画动画，但它只是在我的路径上画了一个边界。我该如何用一些类似笔触的动画来绘制原始箭头？

代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 366.94">
  <path class="showUp" fill="#4C9FDC" stroke="#FF0000" stroke-width= "4" stroke-miterlimit="10" d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>
</svg>

CSS：

body{
  background-color: black;
}

@keyframes Arrow {
 from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}


.showUp {
  stroke-dasharray: 196.1;
  stroke-dashoffset: 196.1;
  animation: Arrow 5s linear forwards;
}

CodePen