title: Why Doesn't This CSS Transition Work On SVG Inside an Anchor
body: <p>I'm trying to transition the fill and path of an embedded SVG object, however this doesn't seem to work (Code Pen <a href="http://codepen.io/Pedr/pen/vyfko/">here</a>):</p>
  
  <p><strong>The SVG:</strong></p>
  
  <pre><code>&lt;a class="simple-link svg-link" href=""&gt;
    Some Text
    &lt;svg version="1.1" id="next-page-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve" preserveAspectRatio="xMinYMin meet"&gt;
      &lt;circle class="the-background" cx="12.5" cy="12.5" r="12.5"/&gt;
      &lt;g&gt;
        &lt;path class="the-icon"  d="M16.088,11.421l-3.404,3.362l-3.418-3.362v-1.204l3.418,3.444l3.404-3.444V11.421z"/&gt;
       &lt;/g&gt;
    &lt;/svg&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p><strong>The Sass:</strong></p>
  
  <pre><code>a
  {
    width:200px;
    height:200px;
    overflow: hidden;
  
    @include transition(color, 1s);
    @include transition(background, 1s);
  
    svg
    {
      width:200px;
      height:200px;
  
      .the-background
      {
        @include transition(fill, 1s);
        fill: grey;
      }
  
      .the-icon
      {
        @include transition(fill, 2.5s);
      }
    }
  
    &amp;:hover
    {
      color: red;
      background: black;
      .the-background
      {
        fill: black;
      }
  
      .the-icon
      {
        fill: red;
      } 
  
    }
  }
  </code></pre>
  
  <p><strong>Why don't the fills animate on hover?</strong></p>