在hover时修改SVG路径

我想在hover时更改svg路径坐标，我可以不使用D3js吗？

SVG是我在sketchapp上制作的一种图形，这里是代码：

我想要做的是图表在hover时平滑过渡。 该图表将作为封面放在标题上。

谢谢！

Answer 1

你可以用SMIL做到这一点，例如

begin属性是您要激活动画的事件，而to是路径最终的结果。

fill =“freeze”确保如果将鼠标放在形状上，它将保持在动画位置。

这是我在Firefox中测试的完整独立示例。