过渡悬停关闭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>