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>如果將滑鼠懸停在三角形上，多邊形的坐標點會發生變化。任何想法在兩種狀態之間創建過渡效果最方便的方法是什么？所以它不只是立即改變，而是有某種緩動影片。
uj5u.com熱心網友回復：
您可以在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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/481556.html
標籤：javascript html css svg 过渡