過渡懸停關閉svg路徑

Question

只是想知道如何使一個svg路徑轉換輕鬆回到懸停關閉它的默認位置。

<svg> 
<path></path> 
</svg> 

CSS：

svg path{ transition: transform 0.5s ease; transform: none} 
svg:hover path{ transition: transform 0.5s ease; transform: translateY(10px)} 

這隻適用於懸停然而，並不是懸停了。

Answer 1

它適用於我，當然你的懸停適用於整個svg在你的問題。你不是隻想把它應用到路徑上嗎？

svg path{ transition: transform 0.5s ease; transform: none} 
 
svg path:hover{ transition: transform 0.5s ease; transform: translateY(10px)}

<svg> 
 
<path stroke="black" stroke-width="15" pointer-events="all" d="M20 20l50 0"></path> 
 
</svg>