Pedr Pedr - 4 months ago 15
CSS Question

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

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?

Answer

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