动画SVG组 [英] Animating an SVG Group

问题描述

我目前有以下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> ，而且我还不知道如何使用。

I am currently animating a rotation on g.rotatable however I would like to use <animateTransform> if possible, and I haven't figured out how.

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

I have tried placing it at the start of the group, at the bottom of it, and even after it, however none have any affect.

    <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或对其进行动画处理，所以我不确定我在哪里

Since I've never really worked with SVGs or animating them, I'm not sure where I'm going wrong.

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动画。

Above is my current CSS animation.

任何人都可以告诉我我要去哪里了，这样我就可以纠正我的错误，或者甚至有可能这样，以便我有可能放弃这一行动。

Can anyone tell me where I'm going wrong, so I can fix my mistakes, or if it's even possible, so I can potentially give up this line of action.

推荐答案

注意：您可能要重新考虑使用SMIL动画而不是CSS动画，因为 Chrome从v45开始不再支持SMIL动画。 p>

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

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

There were two problems in your code and they are as follows:

1. 旋转变换仅将度数作为值，不需要将 deg 后缀添加到其中。此外，还可以指定转换原点（参数2 nd 和3 rd ），但这不是强制性的。


2. .rotatable 元素上的 style ='transform：rotation（...）'。 CSS会覆盖 animateTransform ，因此您看不到任何旋转。避免使用这种样式设置。如果需要进行初始轮换，则可以使用SVG的 transform 属性。

1. The rotate 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. There was a style='transform: rotate(...)' on the .rotatable element. The CSS overrides the animateTransform and so you don't get to see any rotation. Avoid this stylesetting. If there is a need for an initial rotation you could probably use SVG's transform attribute.

下面是一个有效的演示：

Below is a working demo:

<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组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！