Why Doesn't This CSS Transition Work On SVG Inside an Anchor

Question

I'm trying to transition the fill and path of an embedded SVG object, however this doesn't seem to work (Code Pen here):

The SVG:

<a class="simple-link svg-link" href="">
  Some Text
  <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">
    <circle class="the-background" cx="12.5" cy="12.5" r="12.5"/>
    <g>
      <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"/>
     </g>
  </svg>
</a>

The Sass:

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);
    }
  }

  &:hover
  {
    color: red;
    background: black;
    .the-background
    {
      fill: black;
    }

    .the-icon
    {
      fill: red;
    } 

  }
}

Why don't the fills animate on hover?

Solution 1

The reason why the transition doesn't work is because it is within a link.

To fix it, put the link inside of the SVG instead like this SO post suggests

OR

Make the SVG a sibling of the link and use the sibling selector

/* This goes within `a { ...` */
&:hover + svg { /* Or use ~ to select all */
  .the-background
  {
    fill: black;
  }

  .the-icon
  {
    fill: red;
  } 
}

Solution 2

The way I solved this problem was to place fill="currentColor" on the svg path element that I wanted to transition. Then I added color and transition properties to the surrounding anchor tag and performed the CSS transition on the anchor tag instead of the svg path itself. Below is a very stripped down example:

HTML:

<a>
    <svg>
        <path fill="currentColor" />
    </svg>
</a>

SCSS:

a { color: black; transition: color .2s linear;
    &:hover { color: white; } }

Solution 3

I just discovered that in order to transition an svg fill within an anchor element, it only works using rgba color codes. I haven't researched why that is, but it's working on my projects - here's an example: http://rawesome.leveragenewagemedia.com/ (hover the social media icons).

Here's the SASS I'm using:

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  fill: rgba(0,0,0,.2);
  -webkit-transition: fill .5s;
  -moz-transition: fill .5s;
  -ms-transition: fill .5s;
  -o-transition: fill .5s;
  transition: fill .5s;

  &:hover {
    fill: rgba(0,0,0,.5);
  }
}

Comments

[NerdCowboy]

I just tried this and it appears it only works for opacity. Using different colors still won't transition with this method.

[Tim Hettler]

This solution definitely works for transitioning between color states. Thanks for posting this!

[Joel Farris]

Thank you, thank you! Worked in Safari, unlike other things I tried.