这是我的SVG图标代码。此代码是从Adobe Illustrator导出的。我希望当有人将其绘制出来时使该箭头动画化（线条动画）。
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<g class="arrow-line">
<path d="M13.53 27.58a.5.5 0 01-.5-.5.48.48 0 01.2-.4l9.51-6.94a.5.5 0 01.68.09l2.76 3.38 11.84-8.65a.5010489.5010489 0 01.59.81L26.38 24.3a.51.51 0 01-.68-.09l-2.76-3.34-9.12 6.66a.58.58 0 01-.29.05z" fill="#174174"/>
<path d="M38.77 17.03a.39.39 0 01-.37-.37v-2.07h-2.07a.39.39 0 01-.44-.31.39.39 0 01.32-.44h2.56a.38.38 0 01.37.38v2.44a.38.38 0 01-.38.37z" fill="#174174"/>
</g>
</svg>
我尝试使用笔划破折号偏移量和笔划破折号数组方法，但据我了解，除非路径为笔划，否则无法使用这些方法。但是我想知道是否还有另一种方法可以仅使用关键帧和CSS3来使用fill和path选项进行线动画处理。
谢谢。