我有一个由 SVG 制成的徽标。该徽标由几条路径组成，其中两条路径有不同时间的动画。当 SVG 悬停时如何触发它们的动画？我的意思是，当整个 SVG 悬停时，我需要运行两个动画。
这是我迄今为止所拥有的 CodePen： https: //codepen.io/anon/pen/WbByYE。
这是完整的代码：
svg {
width: 160px;
max-width: 100%;
display: block;
margin: 0 auto;
}<svg version="1.1" id="svg-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path id="shape1" fill="#f42b38" d="M77.6,67.9v0.4c0.1,0.7,0.5,1.4,1.1,1.9l2.8,2.1c1.2,0.9,3.1,0.7,4-0.6c4.7-6.3,7.2-13.8,7.2-21.5
s-2.5-15.2-7.2-21.5c-0.9-1.2-2.7-1.5-4-0.6L78.8,30c-0.6,0.4-1,1.1-1.1,1.9v0.4c0,0.6,0.2,1.2,0.5,1.7c3.5,4.7,5.3,10.3,5.3,16
s-1.9,11.3-5.3,16C77.9,66.7,77.6,67.3,77.6,67.9z ">
<animateTransform
type="rotate"
fill="remove"
restart="always"
to="360 57 50"
from="0 57 50"
dur="0.7s"
begin="0.15s"
calcMode="spline"
additive="replace"
accumulate="none"
attributeName="transform"
attributeType="xml"
keySplines="0.42 0 0.58 1"
rotate="10; 100"
repeatCount="1"
keyTimes="0; 1">
</animateTransform>
</path>
<path id="shape2" …