title: Trigger an SVG animation on SVG hover
body: <p>I have a logo made of SVG. 
  This logo is made of a few paths, two of them have an animation with different timing.
  How do I trigger their animation when the SVG is hovered?
  I mean, I need both of the animations to run when the entire SVG is hovered.</p>
  
  <p>Here's a CodePen of what I have so far:
  <a href="https://codepen.io/anon/pen/WbByYE" rel="nofollow noreferrer">https://codepen.io/anon/pen/WbByYE</a>.</p>
  
  <p>Here's the entire code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    width: 160px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;
      &lt;g&gt;
       &lt;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 "&gt;
          
      &lt;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"&gt;
         &lt;/animateTransform&gt;
          
        &lt;/path&gt;
       &lt;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 "&gt;
      &lt;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"&gt;
         &lt;/animateTransform&gt;
       &lt;/path&gt;
       &lt;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"/&gt;
       &lt;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"
        /&gt;
        &lt;/g&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>