Animation 在SVG悬停上触发SVG动画

我有一个SVG的标志。 此徽标由几个路径组成，其中两个路径具有不同计时的动画。 当SVG悬停时，如何触发它们的动画？ 我的意思是，当整个SVG悬停时，我需要两个动画来运行

这是我到目前为止所拥有的代码笔：

以下是完整的代码：

svg{
宽度：160px；
最大宽度：100%；
显示：块；
保证金：0自动；
}

---

首先将

开始

属性更改为

不确定

，以便动画不会立即运行。然后在需要时使用鼠标悬停事件触发动画

例如（假设

trans1

和

trans2

是分配给两个动画元素的ID）：

一个小问题是mouseover事件将为SVG对象的每个单独元素触发，这可能是您不想要的。可以通过在整个图形上放置一个透明的矩形捕捉所有鼠标事件来解决此问题

请参阅下面的代码片段以了解工作示例

---

现有的答案似乎比需要的要难一些。我发现svg中的动画标记可以有begin=“mouseover”

onmouseover="document.getElementById('trans2').beginElement();setTimeout('document.getElementById(\'trans1\').beginElement()',150);"

<animate
  attributename=""
  from=""
  to=""
  begin="mouseover"
  dur=""
/>