Safari 9.1.2 (11601.7.7) 中悬停时的 SVG 过渡失败

Posted

技术标签:

【中文标题】Safari 9.1.2 (11601.7.7) 中悬停时的 SVG 过渡失败【英文标题】:SVG transition on hover fails in Safari 9.1.2 (11601.7.7) 【发布时间】:2016-12-17 01:26:35 【问题描述】:

我试图在悬停时将文本和 .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   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 中也进行转换?

【问题讨论】:

我已经从使用相同版本 Safari 的人那里看到了转换在他们的机器上正常工作的证据。令人抓狂。 【参考方案1】:

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

多汁位:

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

遗憾的是,在 CSS 中更改 :visited 伪以及使用 xmlns:xlink SVG 内部不会使过渡再次起作用,并且没有 黑客那里。

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

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

    向链接添加一些随机数据(类似于 /#timestamp 丑陋,但链接对于用户来说总是“未访问”)。

    不要在链接中使用动画和内联 SVG。

    使用位置和 z-index 将链接放在 SVG 图像上方,以便图像 “点击劫持”。它可以工作,但需要额外的 js 代码来处理 图像的悬停事件不会在悬停动画上松开,例如添加jQuery 处理徽标点击和更改 window.location 的代码。

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

    如果您的 Safari 用户数量较少,请保持原样。

我现在选择 5 号。

【讨论】:

代替 javascript/jQuery 来处理悬停事件,您可以执行类似 a:hover+svg 的操作(前提是 位于 svg 上方的 z-index 并且它们位于每个其他)。

以上是关于Safari 9.1.2 (11601.7.7) 中悬停时的 SVG 过渡失败的主要内容,如果未能解决你的问题,请参考以下文章

在 safari 9.1.2 上导航后禁用滚动

Safari调试

如何打开safari的调试模式

电脑上safari如何给iphone调试

mac版safari有没有在线翻译的功能

safari是啥