title: Animating an SVG Group
body: <p>I currently have the following SVG:</p>
  
  <pre><code>&lt;svg class="tower owner" height="60" width="60" viewBox="0 0 300 300"&gt;
      &lt;g transform="translate(75 75)" opacity="1"&gt;
          &lt;ellipse class="border" cx="0" cy="0" fill="#222" rx="65" ry="65" stroke-width="5"&gt;&lt;/ellipse&gt;
          &lt;g class="rotatable" style="transform: rotate(5.497787143782138rad); transition: transform 2s;"&gt;
              &lt;rect fill="#aaa" height="50" stroke-width="7" stroke="#181818" width="40" x="-20" y="-80"&gt;&lt;/rect&gt;
              &lt;rect fill="#555" height="58" rx="12" ry="10" width="78" x="-39" y="-25"&gt;&lt;/rect&gt;
              &lt;rect fill="#ffe56d" height="46.4" y="-13.399999999999999" rx="12" ry="12" width="78" x="-39"&gt;&lt;/rect&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I am currently animating a rotation on <code>g.rotatable</code> however I would like to use <code>&lt;animateTransform&gt;</code> if possible, and I haven't figured out how.</p>
  
  <p>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.</p>
  
  <pre><code>    &lt;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"&gt;&lt;/animateTransform&gt;
  </code></pre>
  
  <p>Since I've never really worked with SVGs or animating them, I'm not sure where I'm going wrong.</p>
  
  <pre><code>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);
      }
  }
  </code></pre>
  
  <p>Above is my current CSS animation.</p>
  
  <p>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.</p>