Animating an SVG Group

Question

I currently have the following 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>

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>

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);
    }
}

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.

Solution

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