我试图在悬停时将文本和 .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 中会触发。
这个答案 https://stackoverflow.com/a/20012937/281067指出你需要一个起始颜色和结束颜色，我有。
如何才能在 Safari 中实现转换？
有人向我指出rrott.com 上标题为“Safari 中 SVG 的 CSS 过渡动画的错误”的文章。 https://rrott.com/blog/svg/issue-with-css-transition-animation-in-safari.html
多汁的部分：
我发现所有访问过的链接的转换都停止工作
这可能就是我无法重现该问题的原因
在一台机器上，而在另一台机器上失败。
and
遗憾的是，在 CSS 中更改 :visited 伪值以及使用 xmlns:xlink
SVG 内部不会再次使转换工作，并且没有
在那里进行黑客攻击。
文章还列出了一些可能的解决方案：
我在那里看到了几种解决方案，但不幸的是，它们都不是
够好了：
添加一些随机数据到链接（类似于 /#timestamp ，看起来
丑陋，但该链接对于用户来说始终是“未访问的”）。
不要在链接中使用动画和内联 SVG。
使用位置和 z-index 将链接放在 SVG 图像上方，以便图像
“点击劫持”。它可以工作，但需要额外的js代码来处理
图像的悬停事件在悬停动画上不会松动，例如添加Jquery
处理徽标点击和更改 window.location 的代码。
在 Safari 中动态地将 SVG 移出链接。
如果您的 Safari 用户数量较少，请保持原样。
我现在选择5号。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
