Css 如何设置此SVG路径的动画，使其看起来像正在绘制箭头？

我有一个在Illustrator中创建的箭头的SVG路径，但我一辈子都不知道如何（或者如果我能）以我想要的方式设置它的动画。下面是我来过的最近的一次，但正如你所知…只是不在那里

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 850 683" style="enable-background:new 0 0 792 612;" xml:space="preserve">

<linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
          <stop offset="0%" stop-opacity="1" stop-color="#fff"></stop>
          <stop offset="0.29" stop-opacity="1" stop-color="#fff">
            <animate attributeName="offset" values="1;0;1" repeatCount="indefinite" dur="10s" begin="0s"></animate>
          </stop>
          <stop offset="0.29" stop-opacity="0" stop-color="#fff">
            <animate attributeName="offset" values="1;0;1" repeatCount="indefinite" dur="10s" begin="0s"></animate>
          </stop>
          <stop offset="100%" stop-opacity="0" stop-color="royalblue"></stop>
      </linearGradient>

<path class="st4 arrow" fill="url(#lg" d="M500.3,201.9l-33.7,17.5l10.1,6.4l-71,111.4l-39.9-62.3c0,0,0,0-0.1-0.1c-0.1-0.2-0.3-0.4-0.5-0.6
 c-0.1-0.2-0.3-0.3-0.4-0.5c-0.1-0.1-0.3-0.3-0.4-0.4c-0.2-0.2-0.4-0.4-0.7-0.5c0,0,0,0-0.1-0.1c-0.1-0.1-0.3-0.1-0.4-0.2
 c-0.2-0.1-0.5-0.3-0.7-0.4c-0.2-0.1-0.4-0.2-0.7-0.2c-0.2-0.1-0.4-0.1-0.6-0.2c-0.2,0-0.5-0.1-0.7-0.1c-0.2,0-0.4,0-0.6,0
 c-0.2,0-0.5,0-0.7,0.1c-0.2,0-0.4,0-0.7,0.1c-0.2,0-0.5,0.1-0.7,0.2c-0.2,0.1-0.4,0.1-0.6,0.2c-0.3,0.1-0.5,0.2-0.8,0.4
 c-0.1,0.1-0.3,0.1-0.4,0.2c0,0,0,0-0.1,0.1c-0.2,0.2-0.5,0.3-0.7,0.5c-0.1,0.1-0.3,0.2-0.4,0.4c-0.1,0.1-0.3,0.3-0.4,0.5
 c-0.2,0.2-0.3,0.4-0.5,0.6c0,0,0,0-0.1,0.1l-72.8,113c-2.1,3.3-1.2,7.6,2.1,9.7c1.2,0.8,2.5,1.1,3.8,1.1c2.3,0,4.6-1.1,5.9-3.2
 l66.8-103.7l39.9,62.4c0,0,0,0,0.1,0.1c0.3,0.5,0.6,0.9,1,1.2c0.1,0.1,0.2,0.2,0.3,0.3c0.2,0.2,0.4,0.4,0.7,0.5
 c0.1,0,0.1,0.1,0.2,0.1c0.4,0.2,0.8,0.4,1.2,0.5c0.2,0.1,0.4,0.2,0.6,0.2c0.5,0.1,1.1,0.2,1.7,0.2c0,0,0.1,0,0.1,0
 c0.6,0,1.2-0.1,1.8-0.3c0.2,0,0.3-0.1,0.5-0.2c0.4-0.2,0.9-0.3,1.3-0.6c0.1,0,0.1,0,0.2-0.1c0.2-0.1,0.4-0.3,0.6-0.5
 c0.1-0.1,0.3-0.2,0.4-0.3c0.4-0.4,0.7-0.8,1-1.2c0,0,0.1-0.1,0.1-0.1l77-120.7l10.1,6.4L500.3,201.9z"></path>

</svg>

您可以更改渐变，使其从左到右，而不是从下到上。也许这就足够满足你的需要了


正文{
背景颜色：灰色；
}
您可以更改渐变，使其从左到右，而不是从下到上。也许这就足够满足你的需要了


正文{
背景颜色：灰色；
}
另一种方法是设置路径数据本身的动画。这在路径的顶点数量上有明显的限制。列表越长，越难管理。反转动画意味着将值列表加倍。要获得正确的开始和结束，请将路径元素本身上的
d
设置为第一个/最后一个动画值

对于箭头，必须将其移动，并且要始终使其指向正确的方向，需要添加额外的中间动画点。请注意，中间
键时间是双倍的

若要在动画结束时取消显示所有内容，箭头只需在动画持续期间显示


另一种方法是设置路径数据本身的动画。这在路径的顶点数量上有明显的限制。列表越长，越难管理。反转动画意味着将值列表加倍。要获得正确的开始和结束，请将路径元素本身上的
d
设置为第一个/最后一个动画值

对于箭头，必须将其移动，并且要始终使其指向正确的方向，需要添加额外的中间动画点。请注意，中间
键时间是双倍的

若要在动画结束时取消显示所有内容，箭头只需在动画持续期间显示



我在自己搜索和通过stackoverflow搜索时多次遇到这篇文章，但我的问题是，使用笔划动画，它只绘制箭头的轮廓，与填充无关。除非有办法重新画出箭头的路径，所以它只是一条实线，而不是一个形状或什么的？你想让箭头移动并在它后面画线吗？如果是这样，我的第一个想法是为箭头使用一个标记，然后同时为箭头和直线设置动画（使用破折号偏移技巧）。祝你好运。我做了一些类似的事情。这是个好主意，我可以试试……谢谢。我可能不想用箭头引导，更像是从下到上填充。我自己和通过stackoverflow搜索这篇文章时都遇到过很多次，但我的问题是，使用笔划动画，它只绘制箭头的轮廓，与填充无关。除非有办法重新画出箭头的路径，所以它只是一条实线，而不是一个形状或什么的？你想让箭头移动并在它后面画线吗？如果是这样，我的第一个想法是为箭头使用一个标记，然后同时为箭头和直线设置动画（使用破折号偏移技巧）。祝你好运。我做了一些类似的事情。这是个好主意，我可以试试……谢谢。我可能不想用箭头引导，更像是从下到上的填充。啊哈……这可能就够了。它甚至可能需要加速一点，这样看起来就不那么像是被“揭示”了，而更像是被画出来了。取决于客户的喜好，所以我想我们拭目以待。不过非常感谢你，我对SVG还不熟悉，我一辈子都想不出如何改变方向。啊哈……也许就这样吧。它甚至可能需要加速一点，这样看起来就不那么像是被“揭示”了，而更像是被画出来了。取决于客户的喜好，所以我想我们拭目以待。非常感谢你，我对SVG还不熟悉，我一辈子都不知道如何改变方向。这太棒了，也许可以做到。我不介意用箭头引导，这取决于客户的偏好，所以我们会看看他们的想法。一个简单的问题：有没有办法反转动画？可能在到达顶部后暂停一秒钟，然后将其反转？这可能要求太多了，不确定……我对SVG还不熟悉，正在尝试学习/解决所有问题。请参阅编辑-这里的反转只能通过加倍值列表来实现。这太棒了！非常感谢你！最后一个问题…所以我将这个箭头添加到它所属的项目/徽标中，并修改了一些值，以将其定位并匹配到需要的位置…但在动画前后的状态仍然存在问题。看到这个链接：你会注意到，在它运行之前，它的加载就像它运行了一半，而在完成之后，它又回到了那个状态。如何让它从头开始，然后在结束时消失？已编辑-请注意路径的
d
值和额外的
动画。到目前为止，这非常有用-非常感谢您对ccprog的帮助。最后一个问题。。。。动画结束后，我需要它再播放一次，然后让箭头保持原位。我没有添加到现有的，而是复制了它，这样第二个会延迟运行。唯一的国际空间站