animation - 在 SVG 悬停时触发 SVG 动画

Question

我有一个由 SVG 制成的 Logo 。这个标志由几条路径组成，其中两条有不同时间的动画。当 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" fill="#f42b38" d="M65.9,59.4v0.4c0.1,0.7,0.5,1.4,1.1,1.9l2.3,1.6c1.2,0.9,3,0.7,4-0.6
    		c5.3-7.1,5.3-18.1,0-25.2c-0.9-1.2-2.7-1.5-4-0.6L67,38.5c-0.6,0.4-1,1.1-1.1,1.9v0.4c0,0.6,0.2,1.2,0.5,1.7c3.2,4.2,3.2,10.8,0,15
    		C66.1,58.1,65.9,58.7,65.9,59.4z	">
    <animateTransform  
                      type="rotate" 
                      fill="remove" 
                      restart="always" 
                      to="360 57 50" 
                      from="0 57 50" 
                      dur="0.85s" 
                      calcMode="spline" 
                      additive="replace" 
                      accumulate="none" 
                      attributeName="transform" 
                      attributeType="xml" 
                      keySplines="0 0 0.58 1" 
                      rotate="10; 100" 
                      repeatCount="1" 
                      keyTimes="0; 1">
    			</animateTransform>
    	</path>
    	<path fill="#f42b38" d="M90.7,78.6c-1.2-1.2-3.1-1.2-4.3,0c-7.6,7.5-17.6,11.7-28.3,11.7C36,90.3,18,72.3,18,50.2
    		s18-40.1,40.1-40.1c10.6,0,20.7,4.1,28.3,11.7c1.2,1.1,3.1,1.1,4.3,0l2.7-2.7c1.1-1.1,1.1-3.2,0-4.3C83.9,5.3,71.5,0.1,58.2,0.1
    		c-27.6,0-50,22.4-50,50s22.4,50,50,50c13.3,0,25.8-5.1,35.3-14.6c1.1-1.1,1.1-3.2,0-4.3L90.7,78.6z"/>
    	<path fill="#f42b38" d="M53.2,50.1c0,2.6,2.2,4.7,4.7,4.7c2.6,0,4.7-2.2,4.7-4.7s-2.2-4.7-4.8-4.7C55.2,45.4,53.2,47.5,53.2,50.1z"
    		/>
      </g>
    </svg>

Answer 1

现有的答案似乎比它需要的要困难一些。我发现 svg 中的动画标签可以有 begin="mouseover"

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

这会在 svg 元素悬停时设置动画。还有很多我不知道的其他事件类型，您可以在这里找到。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin