title: css3 keyframe animation for path in svg symbol tag
body: <p>Is it possible to animate a path in the symbol tag with css3 keyframe animation? It doesn't work in my case.</p>
  
  <p><strong>Example:</strong></p>
  
  <p><a href="http://codepen.io/anon/pen/Hfbmr" rel="nofollow">http://codepen.io/anon/pen/Hfbmr</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" style="display: none;"&gt;
  &lt;symbol id="icon-love" viewBox="0 0 54 54"&gt;
          &lt;title&gt;Love&lt;/title&gt; 
          &lt;path id="icon-love-circle" fill="#000000" d="M27,3c13.2,0,24,10.8,24,24S40.2,51,27,51S3,40.2,3,27S13.8,3,27,3 M27,0C12.1,0,0,12.1,0,27
          s12.1,27,27,27s27-12.1,27-27S41.9,0,27,0L27,0z"/&gt;
          &lt;path id="icon-love-heart" fill="#000000" d="M15.2,23.2c0-2,0.6-3.5,1.7-4.6c1.1-1.1,2.7-1.7,4.7-1.7c0.6,0,1.1,0.1,1.7,0.3c0.6,0.2,1.1,0.5,1.6,0.8
          c0.5,0.3,0.9,0.6,1.3,0.9c0.4,0.3,0.7,0.6,1,0.9c0.3-0.3,0.7-0.6,1-0.9c0.4-0.3,0.8-0.6,1.3-0.9c0.5-0.3,1-0.6,1.6-0.8
          c0.6-0.2,1.1-0.3,1.7-0.3c2,0,3.6,0.6,4.7,1.7c1.1,1.1,1.7,2.6,1.7,4.6c0,2-1,4-3.1,6l-8.3,8c-0.2,0.2-0.4,0.2-0.6,0.2
          c-0.2,0-0.4-0.1-0.6-0.2l-8.4-8.1c-0.1-0.1-0.2-0.2-0.4-0.3c-0.2-0.2-0.4-0.5-0.7-0.9c-0.3-0.4-0.6-0.9-0.9-1.3
          c-0.3-0.4-0.5-1-0.7-1.6C15.4,24.4,15.2,23.8,15.2,23.2z M17,23.2c0,1.5,0.8,3.1,2.5,4.8l7.8,7.5L35,28c1.7-1.7,2.5-3.3,2.5-4.8
          c0-0.7-0.1-1.4-0.3-1.9c-0.2-0.6-0.4-1-0.7-1.3c-0.3-0.3-0.7-0.6-1.1-0.8c-0.4-0.2-0.8-0.3-1.3-0.4c-0.4-0.1-0.8-0.1-1.3-0.1
          s-1,0.1-1.5,0.3c-0.5,0.2-1,0.5-1.5,0.9c-0.5,0.3-0.8,0.7-1.2,1c-0.3,0.3-0.6,0.6-0.8,0.8c-0.2,0.2-0.4,0.3-0.7,0.3
          s-0.5-0.1-0.7-0.3c-0.2-0.2-0.5-0.5-0.8-0.8c-0.3-0.3-0.7-0.6-1.2-1c-0.5-0.3-0.9-0.6-1.5-0.9c-0.5-0.2-1-0.3-1.5-0.3
          c-0.5,0-0.9,0-1.3,0.1c-0.4,0.1-0.8,0.2-1.3,0.4c-0.4,0.2-0.8,0.5-1.1,0.8c-0.3,0.3-0.5,0.8-0.7,1.3C17.1,21.8,17,22.5,17,23.2z"
          /&gt;
  &lt;/symbol&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.icon-love {
  height: 54px;     
  width: 54px;
  }
  
  #icon-love-heart {
  animation-name: 'heartbeat';
  animation-duration: 5000ms;
  transform-origin:70% 70%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }
  
  @keyframes heartbeat {
  0% { transform: scale(1); }
  30% { transform: scale(1); }
  40% { transform: scale(1.08); }
  50% { transform: scale(1); }
  60% { transform: scale(1); }
  70% { transform: scale(1.05); }
  80% { transform: scale(1); }
  100% { transform: scale(1); }
  }
  </code></pre>
  
  <p>Cheers Philip</p>