Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

.svg上的转换在Safari中不会触发，但在Chrome和Firefox中也是如此。

This answer表示你需要一个开始和结束颜色，我有。

如何在Safari中进行转换？

Answer 1

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

多汁位：

我发现转换停止了所有访问过的链接这可能是我无法重现这个问题的原因在一台机器上，而在另一台机器上失败。

和

可悲的是，更改：在CSS中访问pseudo以及使用xmlns：xlink 在SVG内部不会使转换再次工作而且没有黑客在那里。

该文章还列出了许多可能的解决方案：

我在那里看到了几种解决方案但不幸的是，它们都没有   足够好了：



向链接添加一些随机数据（类似/＃时间戳的外观）   丑陋但链接将始终为用户“未访问”。



请勿在链接中使用动画和内联SVG。



使用position和z-index将链接放在SVG图像上方，使图像为   ＆＃39; clickjacked”。它工作但需要额外的js代码来处理   图像的悬停事件在悬停动画时不会松动，例如添加Jquery   将处理徽标点击并更改window.location的代码。



在Safari的情况下，动态地将SVG移动到链接之外。



如果Safari用户数量较少，请保持原样。

我现在要排在第5位。

Safari 9.1.2（11601.7.7）中悬停时SVG转换失败

1 个答案: