转换悬停在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>