动画 SVG 锚点

Question

我正在尝试制作一个简单的 svg 动画，其中一个菜单链接有一个 svg 下划线，我想对线条进行动画处理以创建一个非常简单的形状。基本上是由总共 7 个锚点组成的一条线，其中中间的 3 个锚点（每个设置为 2）将在 Y 轴上移动几个像素到顶部。

例如从此：

到这里：

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

或者我应该使用 spring svg 画布的 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>

Answer 2

我认为这可能与您最初要求的有点接近：

$('a').on({
  mouseenter: function() {
    $(this).find('.animIn')[0].beginElement();
  },
  mouseleave: function() {
    $(this).find('.animOut')[0].beginElement();
  }
})

body {
  background: #000;
}

svg {
  display: block;
  margin: 0 auto;
  position: relative;
  top: -5px;
}

polyline {
  stroke: #48B4D3;
  stroke-width: 2;
}

a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #48B4D3
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#">Some link
  <svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" width="62px" height="12px" viewBox="0 0 62 12">
    <polyline fill="none" stroke-miterlimit="10" points="61,10.5 51,10.5 41,10.5 31,10.5 21,10.5 11,10.5 1,10.5 ">
      <animate class="animIn" begin="indefinite" attributeName="points" dur="200ms" fill="freeze" to="61,11 51,5 41,11 31,5 21,11 11,5 1,11" />
      <animate class="animOut" begin="indefinite" attributeName="points" dur="200ms" fill="freeze" to="61,10.5 51,10.5 41,10.5 31,10.5 21,10.5 11,10.5 1,10.5" />
    </polyline>
  </svg>
</a>

<a href="#">Another link
  <svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" width="62px" height="12px" viewBox="0 0 62 12">
    <polyline fill="none" stroke-miterlimit="10" points="61,10.5 51,10.5 41,10.5 31,10.5 21,10.5 11,10.5 1,10.5 ">
      <animate class="animIn" begin="indefinite" attributeName="points" dur="200ms" fill="freeze" to="61,11 51,5 41,11 31,5 21,11 11,5 1,11" />
      <animate class="animOut" begin="indefinite" attributeName="points" dur="200ms" fill="freeze" to="61,10.5 51,10.5 41,10.5 31,10.5 21,10.5 11,10.5 1,10.5" />
    </polyline>
  </svg>
</a>