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

注意：您可能需要重新考虑使用SMIL动画而不是CSS动画，因为Chrome has deprecated support for SMIL animations from v45。

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

SVG中的rotate transform只是将度数作为值，不需要添加deg后缀。此外，还可以指定变换原点（2 ^nd和3 ^rd param）但它不是强制性的。
style='transform: rotate(...)'元素上有一个.rotatable。 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>

动画SVG组

1 个答案: