对 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>

我目前正在动画旋转g.rotatable不过我想用<animateTransform>如果可以的话，我还没想出如何做。

我尝试将它放在组的开头、底部，甚至在它之后，但是没有任何影响。

    <animateTransform attributeName="transform" attributeType="XML" dur="5s" keyTimes="0;0.4;0.75;1" repeatCount="indefinite" type="rotate" values="315deg;90deg;200deg;315deg" calcMode="linear"></animateTransform>

由于我从未真正使用过 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 动画。

谁能告诉我哪里出错了，这样我就可以纠正我的错误，或者如果有可能的话，这样我就可以放弃这条行动路线。

Note:您可能需要重新考虑使用 SMIL 动画而不是 CSS 动画，因为Chrome 从 v45 开始不再支持 SMIL 动画 https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL.

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

1. The rotate transform https://developer.mozilla.org/en/docs/Web/SVG/Attribute/transform in SVG just takes the degree number as value and doesn't need the deg suffix to be added to it. In addition a transform origin can also be specified (2^nd and 3^rd param) but it is not mandatory.
2. 有一个style='transform: rotate(...)' on the .rotatable元素。 CSS 会覆盖animateTransform所以你看不到任何旋转。避免这种情况style环境。如果需要初始旋转，您可以使用 SVGtransform属性。

下面是一个工作演示：

<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" transform="rotate(315)">
      <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>
      <animateTransform attributeName="transform" attributeType="XML" dur="5s" keyTimes="0;0.4;0.75;1" repeatCount="indefinite" type="rotate" values="315;90;200;315" calcMode="linear"></animateTransform>
    </g>
  </g>
</svg>