Transition effect between two states of svg polygon on hover-CodePudding

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 onm ouseenter="navHoverIn(this)" onm ouseleave="navHoverOut(this)">
  <svg viewBox="0 0 200 60" >
    <polygon points="0,0 200,0 100,10">
  </svg>
</div>

If you hover over the triangle, the coordinate points of the polygon change. Any ideas what is the most convenient way to create the transition effect between the two states? So it doesn't just instantly change, but has some kind of ease animation.

CodePudding user response：

You can do all this in SMIL. No javascript required.

<div>
  <svg viewBox="0 0 200 60" >
    <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>