Link hover with color change + svg image + transition

Question

Google Chrome

In general, such a task, you need to make a link with a svg image to the site page, + so that the transition smoothly changes the color of the svg image and links, I think everything sounds simple and clear)
HTML

<a href="index.html">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="9px" height="14px" viewBox="0 0 9 14" enable-background="new 0 0 9 14" xml:space="preserve">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#404C54" d="M7,0l1.414,1.414l-7,7L0,7L7,0z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#404C54" d="M0,7l1.414-1.414l7,7L7,14L0,7z"/>
  </svg>
   Home
 </a>

css

a {
  transition: all .4s ease;
  color: #111;
  text-decoration: none;
}
a:hover {
  color: #aaa;
}
a svg > path {
  transition: fill .4s ease;
}
a:hover svg path {
  fill: #aaa;
}

And it worked,
But chrome, ie chrome, my favorite browser let me down here,
when I followed the link, chrome did it :visited, and then all the charm went bad,
the transition for the svg image just stopped working, to failure.
Does anyone know a solution or something else to fix this?
MAC OS X, Google chrome Version 34.0.1847.137

Answer 1

Link to jsfiddle.net

Answer 2

jsfiddle.net/ArvLf/1