Вобщем такая задача, нужно сделать ссылку с 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>
CSSa {
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