Ховер ссылки cо сменой цвета + svg картинкой + transition

Вобщем такая задача, нужно сделать ссылку с svg картинкой, на страницу сайта, + чтобы transition плавно менял цвет svg картинки и ссылки, думаю звучит все просто и ясно )

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


И это работало,
Но вот хром, имено хром, мой любимый браузер тут меня подвел,
когда я перешел по ссылке, хром ее сделал :visited, и тут вся прелесть испортилась,
просто перестал работать transition для svg картинки, на отказ.
Может кто то знает решение или что то еще чтобы это исправить?

MAC OS X, Google chrome Версия 34.0.1847.137
  • Вопрос задан
  • 8822 просмотра
Пригласить эксперта
Ответы на вопрос 2
denver
@denver
Дай ссылку на jsfiddle.net
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы