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>Si pasa el cursor sobre el triángulo, los puntos de coordenadas del polígono cambian. ¿Alguna idea de cuál es la forma más conveniente de crear el efecto de transición entre los dos estados? Por lo tanto, no solo cambia instantáneamente, sino que tiene algún tipo de animación fácil.
Puedes hacer todo esto en SMIL . No requiere 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>