Css 设置SVG组的动画

我目前拥有以下SVG：

<svg class="tower owner" height="60" width="60" viewBox="0 0 300 300">
    <g transform="translate(75 75)" opacity="1">
        <ellipse class="border" cx="0" cy="0" fill="#222" rx="65" ry="65" stroke-width="5"></ellipse>
        <g class="rotatable" style="transform: rotate(5.497787143782138rad); transition: transform 2s;">
            <rect fill="#aaa" height="50" stroke-width="7" stroke="#181818" width="40" x="-20" y="-80"></rect>
            <rect fill="#555" height="58" rx="12" ry="10" width="78" x="-39" y="-25"></rect>
            <rect fill="#ffe56d" height="46.4" y="-13.399999999999999" rx="12" ry="12" width="78" x="-39"></rect>
        </g>
    </g>
</svg>

因为我从来没有真正与SVG合作过，也没有为他们制作过动画，所以我不知道我哪里出了问题

svg.tower .rotatable {
    animation: tower 5s linear infinite;
}

@keyframes tower {
    0% {
        transform: rotate(315deg);
    }
    40% {
        transform: rotate(90deg);
    }
    75% {
        transform: rotate(200deg);
    }
    100% {
        transform: rotate(315deg);
    }
}

上面是我当前的CSS动画

谁能告诉我哪里出了问题，这样我就可以改正错误，或者如果可能的话，这样我就有可能放弃这一行动

注意：您可能需要重新考虑使用SMIL动画而不是CSS动画，因为

代码中有两个问题，如下所示：

SVG中的只将度数作为值，不需要添加

deg

后缀。此外，还可以指定变换原点（第2个和第3个参数），但它不是必需的

在

.rotatable

元素上有一个

style='transform:rotate（…）'

。CSS覆盖了

animateTransform

，因此您无法看到任何旋转。避免此

样式

设置。如果需要初始旋转，您可能会使用SVG的

transform

属性

下面是一个工作演示：

From：尽管Chrome 45不赞成使用SMIL来支持CSS动画和Web动画，但Chrome开发人员自那以后就一直反对使用SMIL。

svg.tower .rotatable {
    animation: tower 5s linear infinite;
}

@keyframes tower {
    0% {
        transform: rotate(315deg);
    }
    40% {
        transform: rotate(90deg);
    }
    75% {
        transform: rotate(200deg);
    }
    100% {
        transform: rotate(315deg);
    }
}