css - 动画 SVG 组

Question

我目前有以下 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 动画。

任何人都可以告诉我哪里出错了，这样我就可以改正我的错误，或者如果可能的话，这样我就有可能放弃这一行动。

Answer 1

Note: You may want to reconsider using SMIL animations instead of CSS animations because Chrome has deprecated support for SMIL animations from v45.

您的代码中存在两个问题，如下所示:

1. rotate transform在 SVG 中，只需将度数作为值，不需要向其添加 deg 后缀。此外，还可以指定变换原点(第 2^nd 和第 3^rd 参数)，但这不是强制性的。
2. 在 .rotatable 元素上有一个 style='transform: rotate(...)'。 CSS 覆盖了 animateTransform，因此您看不到任何旋转。避免这种 style 设置。如果需要初始旋转，您可以使用 SVG 的 transform 属性。

下面是一个工作演示:

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