悬停时 svg 多边形两种状态之间的过渡效果

Question

function menuHover(navLI, Y) {
    const topTriangle = navLI.querySelector(".triangle").querySelector("polygon");
    topTriangle.setAttribute("points", "0,0 200,0 100," + Y);
}

function navHoverIn(navLI) {menuHover(navLI, 60);}
function navHoverOut(navLI) {menuHover(navLI, 10);}

<div onmouseenter="navHoverIn(this)" onmouseleave="navHoverOut(this)">
  <svg viewBox="0 0 200 60" class="triangle">
    <polygon points="0,0 200,0 100,10">
  </svg>
</div>

如果将鼠标悬停在三角形上，多边形的坐标点会发生变化。 任何想法在两种状态之间创建过渡效果的最方便方法是什么？所以它不只是立即改变，而是有某种轻松的动画。

Answer 1

您可以在 SMIL 中完成这一切。不需要 javascript。

<div>
  <svg viewBox="0 0 200 60" class="triangle">
    <polygon points="0,0 200,0 100,10">
      <animate begin="mouseover" attributeName="points" to="0,0 200,0 100,60" dur="1s" restart="whenNotActive" fill="freeze"/>
      <animate attributeName="points" begin="mouseout" dur="1s" fill="freeze" restart="whenNotActive" to="0,0 200,0 100,10"/>
    </polygon>
  </svg>
</div>