SVG动画不适用于Chrome中的图标

Question

在<head>中设置SVG偏好图标。

<link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml">

这是SVG文件的内容，它旋转内部圆。默认动画在Chrome中根本不起作用。

如何使它在Chrome中工作？在Firefox中，它工作正常，但在Edge中，Chrome是最重要的

​

<svg width=" 54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="27" cy="27" r="25" stroke="#005C97" stroke-width="3" />
    <circle class="logo-eye" cx="35" cy="21" r="7" fill="#005C97" />
    <style>
    @keyframes rotations {
        to {
            transform: rotate(360deg)
        }
    }
    circle {
        animation: rotations 4s linear infinite;
        display: block;
        transform-origin: 50% 50%;
        will-change: transform;
    }
    </style>
</svg>

​

Answer 1

尝试用SMIL旋转动画替换CSS动画：

​

<svg width=" 54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="27" cy="27" r="25" stroke="#005C97" stroke-width="3" />
    
    <circle class="logo-eye" cx="35" cy="21" r="7" fill="#005C97" >
     <animateTransform id="an"  attributeName="transform" type="rotate" begin="0s" dur="4s" values="0 27 27;360 27 27" repeatCount="indefinite" /> 
    </circle>
</svg>

​

Answer 2

CSS和SMIL都不适用于Windows上的Chrome或Edge。Firefox是唯一响应非js动画图标的浏览器。除非有一个特殊的语法需要动画在WebKit浏览器中的偏爱图标我不知道.？

Answer 3

它目前不支持谷歌铬。这也不是一个bug，它只是似乎不是一个要求。

看看Google，唯一需要的铬偏袒状态页功能是：https://chromestatus.com/feature/5180316371124224。它还被标记为完全由规范实现。因此，如果我们想要这个特性，我们应该提出一个特性请求。

到目前为止我还没找到。

这个页面提供了一个简单的方法来测试浏览器是否支持图标中的SVG动画，以及哪一个支持SVG动画：https://animated-svg-favicon.glitch.me。

CSS、JS和SML动画可以进行测试。