SVG动画图形箭头

这是我第一次使用SVG，我想知道是否有可能创建带有箭头的动画线条图。我发现了多个没有箭头的动画线条图、带箭头的非动画线条图和带箭头的动画直线图的示例，但这并不完全是我要寻找的。我在下面附上了一些我一直在玩的代码笔示例。有人知道这是否可行/有解决方案吗？非常感谢

动画行缺少箭头（需要箭头）：

#HTML
#CSS（更少）
@进口“lesshat”；
@达克格雷：303030；
*{
框大小：边框框；
}
身体{
背景：@darkgrey；
}
.graph\uu包装器{
宽度：400px；
保证金：30像素自动；
位置：相对位置；
svg{
位置：绝对位置；
利润率：36px 0px 0px 15px；
}
}
.路径{
笔划阵列：1000；
行程偏移量：1000；
动画：向前冲3秒；
动画迭代次数：1；
动画延迟：1s；
}
@关键帧破折号{
到{
笔划偏移：0；
}
}
.说明{
字体系列：“机器人”；
颜色：变浅（@darkgrey，50%）；
文本对齐：居中；
利润率：40px 0px；
} 

带箭头的动画直线（需要在路径上的多个点处停止）：

我尝试将路径描述从#1添加到#2，它具有所需的最终图形，只是没有动画：

我还尝试将箭头标记从#2添加到#1，但箭头没有动画：

---

我也愿意使用插件，例如，但没有看到任何对我的情况有帮助的工作示例。

可以使用偏移运动（旧语法：运动路径）来实现这一点。 请注意，这是一个高度实验性的特性。它目前只在Chrome中工作。更重要的是，我在这里使用“旧”语法，因为这是目前在chrome中使用的语法，但它很快就会切换到新的systax

*{
框大小：边框框；
}
身体{
背景:#303030；
}
.graph\uu包装器{
宽度：400px；
保证金：30像素自动；
位置：相对位置；
svg{
位置：绝对位置；
利润率：36px 0px 0px 15px；
}
}
.路径{
笔划阵列：428；
行程偏移：428；
动画：向前冲3秒；
动画迭代次数：1；
动画延迟：1s；
}
@关键帧破折号{
到{
笔划偏移：0；
}
}
@关键帧pm{
从{
运动偏移：0%；
}
到{
运动补偿：100%
}
}
#箭{
动画：pm 3s轻松前进；
动画迭代次数：1；
动画延迟：1s；
运动路径：路径（'M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.9062 L244.019531,83.0039012 L3842.83534.839012 L9844'）；
运动旋转：自动；
运动锚：中心；
}
.说明{
字体系列：“机器人”；
颜色：变浅（@darkgrey，50%）；
文本对齐：居中；
利润率：40px 0px；
}

---

这似乎是或多或少的重复。除非你想用三角形而不是圆。

# HTML
<div class="graph__wrapper">
  <svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
      <path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844" id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>
    </g>
  </svg>
</div> 


# CSS(Less)

@import "lesshat";

@darkgrey:          #303030;

*{
  box-sizing: border-box;
}

body{
  background: @darkgrey;
}

.graph__wrapper{
  width: 400px;
  margin: 30px auto;
  position: relative;

  svg{
    position: absolute;
    margin: 36px 0px 0px 15px;
  }
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 3s ease-in forwards;
  animation-iteration-count: 1;
  animation-delay: 1s;
}

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

.description{
  font-family: "Roboto";
  color:lighten(@darkgrey, 50%);
  text-align: center;
  margin: 40px 0px;
}