gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 02:16:14 26 4
gpt4 key购买 nike

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

最佳答案

我被指向一个 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 个。

关于css - 在 Safari 9.1.2 (11601.7.7) 中悬停时 SVG 过渡失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38877174/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com