title: How to create an endless animation loop in SVG
body: <p>I'm new to SVG-Animation and I tried to rotate a group-element eight times by 45°. (45, 90, 135, 180, 225, 270, 315, 360).
  Example below works fine for me, but how do I create an endless loop of the entire animation? Now it only runs once.</p>
  
  <p>I'm open minded for other possibilities...</p>
  
  <p>Thanks in advance</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;  
  &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16"&gt;
  
      &lt;g&gt;
          &lt;animateTransform attributeName="transform" type="rotate" values="45 8 8" begin="1000ms"/&gt;
          &lt;animateTransform attributeName="transform" type="rotate" values="90 8 8" begin="2000ms"/&gt;
          &lt;animateTransform attributeName="transform" type="rotate" values="135 8 8" begin="3000ms"/&gt;
          &lt;animateTransform attributeName="transform" type="rotate" values="180 8 8" begin="4000ms"/&gt;
          &lt;animateTransform attributeName="transform" type="rotate" values="225 8 8" begin="5000ms"/&gt;
          &lt;animateTransform attributeName="transform" type="rotate" values="270 8 8" begin="6000ms"/&gt;
          &lt;animateTransform attributeName="transform" type="rotate" values="315 8 8" begin="7000ms"/&gt;
          &lt;animateTransform attributeName="transform" type="rotate" values="360 8 8" begin="8000ms"/&gt;
  
          &lt;rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/&gt;
      &lt;/g&gt;
  
  &lt;/svg&gt;
  </code></pre>