SVG中箭头的绘制动画

提问者：小点点

SVG中箭头的绘制动画

我对SVG世界很陌生，当我想“画”一个弯曲的箭头时，我面临着一些问题。

基本上，我想创建一个动画，就像本文中解释的那样，但是在路径的末尾有一个形状，以便显示一个箭头。

以下是我用于直箭头的代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
  <marker
    id="arrow"
    orient="auto"
    viewBox="0 0 10 10"
    markerWidth="3"
    markerHeight="4"
    markerUnits="strokeWidth"
    refX="1" refY="5">
   <polyline points="0,0 10,5 0,10 1,5" fill="black" />
  </marker>
</defs>

<path
    id="line"
    marker-end="url(#arrow)"
    stroke-width="3"
    fill="none"
    stroke="black">

    <animate
        dur="2s"
        repeatCount="indefinite"
        attributeName="d"
        values="M10,10 L10,10; M10,10 L45,25;" />
</path>

带着一点CSS：

#line
{
   stroke-dasharray: 5;
  stroke-dashoffset: 10;
  -webkit-animation: draw 1s linear infinite;
}

@-webkit-keyframes draw
{
  to { stroke-dashoffset: 0;}
}

结果如下：

这很酷，但是现在我想要一个弯曲的箭头。所以我更新了动画标签，如下所示：

<animate
        dur="2s"
        repeatCount="indefinite"
        attributeName="d"
        values="M7,121 C7,121 7,121 7,121; M7,121 C66,4 143,75 147,125" />

我刚刚更改了动画的路径，以便有一个弯曲的路径。但结果如下：

我认为这很合乎逻辑，但这不是我想要的。标记目前正在直线上移动；它应该遵循绘图路径。

老实说，我不知道如何做到这一点，任何建议都会很棒：）

你可以在这里找到一个JSFiddle。

如您所见，在这些实验中没有使用JS，如果我们可以避免这种语言而只使用SVGCSS那就太好了。

提前感谢！

共1个答案

匿名用户

我想你可能会发现这篇关于svg line动画的文章非常有用：https://css-tricks.com/svg-line-animation-works/

CSS：

.path {
   stroke-dasharray: 1000;
   stroke-dashoffset: 1000;
   animation: dash 5s linear alternate infinite;
}

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

它在行动中的演示：http://codepen.io/chriscoyier/pen/bGyoz

这里有一个关于JavaScript和确定要绘制的线的长度的警告。如果您不想使用JS，您可以通过更新dasharray和dash偏移值来确定动画的长度。