javascript - 动画 SVG anchor

Question

我正在尝试做一个简单的 svg 动画，其中菜单链接有一个 svg 下划线，我想为线条设置动画以创建一个非常简单的形状。基本上由总共 7 个 anchor 组成的一条线，其中中间的 3 个 anchor (每个设置为 2)将在 Y 轴上移动几个像素到顶部。

例如来自:

为此:

这可能吗？我需要使用 svg 动画框架还是有更简单的方法来做到这一点？

或者我应该使用 spring svg Canvas 的 sprint 和动画定位？

我很乐意提供任何帮助，谢谢。

Answer 1

我不确定你到底在追求什么。你的描述不清楚。你的意思是这样的吗？

svg {
  width: 260px;
  height: 100px;
  background: #212121;
}

path {
   fill: none;
   stroke: #79b;
   stroke-width: 8px;
}

<svg viewbox="0 0 260 100">
  <path d="M0,0">
    <animate attributeName="d" attributeType="XML"
       from="M10,75l40,0l40,0l40,0l40,0l40,0l40,0;"
       to="M10,75l40,-50l40,50l40,-50l40,50l40,-50l40,50"
       dur="1s" fill="freeze" />
  </path>
</svg>