title: SVG animation with CSS and :hover
body: <p>I'm trying to animate svg path when mouse is over the container dom element(a), which is bigger than svg element itself(for bigger contact area). I can't rotate whole container, because svg element will contain some more paths, which should be static. Now green arrow does not accept the initial position when mouse leaves, that I would like to see happen.</p>
  
  <p><a href="https://jsbin.com/juqene/18/edit?html,css,output" rel="nofollow">https://jsbin.com/juqene/18/edit?html,css,output</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="outer"&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56"&gt;
          &lt;path id="arrow" fill="none" stroke="#21B469" stroke-miterlimit="10" d="M26.637 55.68L.583 28.346 25.333.32"/&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#arrow {
       transform: none;
  }
  
  #outer:hover #arrow {
     transform: rotate(10deg);
  }
  </code></pre>