css - 在 Safari 9.1.2 (11601.7.7) 中悬停时 SVG 过渡失败

Question

我试图在悬停时将文本和 .svg 淡化为另一种颜色。

a{
  color: #ff0000;
  display: inline-block;
  margin: 0 0 0 1em;
  text-decoration: none;
  text-transform: lowercase;
  transition: color 1s linear;
}
a:hover{
  color: #000;
}
svg{
  vertical-align: middle;
  width: 2em;
}
path{
  transition: fill 1s linear;
  fill: #ff0000;
 }
a:hover path{
  fill: #000;
}

<a href="http://example.com" class="tweet-this">
    <i class="icon icon-twitter">
        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>twitter</title><path d="M24.679 10.658c-.651.281-1.35.471-2.083.556.749-.437 1.324-1.13 1.595-1.955-.701.405-1.477.699-2.303.858-.662-.687-1.604-1.116-2.647-1.116-2.003 0-3.627 1.582-3.627 3.535 0 .277.032.546.094.805-3.014-.147-5.687-1.554-7.476-3.693-.312.522-.491 1.129-.491 1.777 0 1.226.64 2.308 1.614 2.942-.594-.018-1.154-.177-1.643-.442v.045c0 1.712 1.25 3.141 2.909 3.466-.304.081-.625.124-.956.124-.234 0-.461-.022-.682-.063.462 1.404 1.801 2.426 3.388 2.455-1.241.948-2.805 1.513-4.505 1.513-.292 0-.581-.017-.865-.049 1.605 1.003 3.512 1.588 5.56 1.588 6.671 0 10.32-5.385 10.32-10.056l-.01-.457c.709-.498 1.323-1.121 1.81-1.829" fill="#fff"></path></svg>
    </i>
    Tweet this
</a>

.svg 上的过渡不会在 Safari 中触发，但会在 Chrome 和 Firefox 中触发。

This answer声明您需要开始和结束颜色，我有。

如何在 Safari 中也进行转换？

Answer 1

我被指向一个 article on rrott.com titled "Bug with CSS transition animation for SVG in Safari."

多汁的碎片:

I found that the transition stops working for all the visited links and that could be the reason why I was not able to reproduce the issue on one machine while it is failed on another.

和

Sadly, changing :visited pseudo in CSS as well as using xmlns:xlink inside of SVG does not make transition working again and there are no hacks there.

文章还列出了一些可能的解决方案:

I see several solutions there but, unfortunately, none of them are good enough:

1. add some random data to the link(something like /#timestamp that looks ugly but the link will always be ‘unvisited’ for the users).

2. Do not use animation and inlined SVG in links.

3. Put link above SVG image using position and z-index so the image is 'clickjacked’. It works but requires additional js code to handle image’s hover event to not loose on hover animation, e.g. add Jquery code that will handle clicks on logo and change window.location.

4. Dynamically move SVG outside of the link in case of Safari.

5. Leave it as is if you have low amount of Safari users.

我现在选择第 5 个。