How to create an endless animation loop in SVG

Question

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.

I'm open minded for other possibilities...

Thanks in advance

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
<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">

    <g>
        <animateTransform attributeName="transform" type="rotate" values="45 8 8" begin="1000ms"/>
        <animateTransform attributeName="transform" type="rotate" values="90 8 8" begin="2000ms"/>
        <animateTransform attributeName="transform" type="rotate" values="135 8 8" begin="3000ms"/>
        <animateTransform attributeName="transform" type="rotate" values="180 8 8" begin="4000ms"/>
        <animateTransform attributeName="transform" type="rotate" values="225 8 8" begin="5000ms"/>
        <animateTransform attributeName="transform" type="rotate" values="270 8 8" begin="6000ms"/>
        <animateTransform attributeName="transform" type="rotate" values="315 8 8" begin="7000ms"/>
        <animateTransform attributeName="transform" type="rotate" values="360 8 8" begin="8000ms"/>

        <rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/>
    </g>

</svg>

possible duplicate of [How to loop SVG animation sequence?](http://stackoverflow.com/questions/3629987/how-to-loop-svg-animation-sequence) — Gian, Sep 14 '11 at 14:18

score 3 · Accepted Answer · answered Sep 16 '11 at 04:28

If you change your example to use only one animateTransform element with all angles provided in the values attribute, you can use the repeatCount attribute to set the number of times the animation should be repeated. If the repeatCount is set to indefinite, the animation will repeat forever.

The following example I think will do what you are looking for.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
<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">

    <g>
        <animateTransform attributeName="transform" type="rotate" 
           values="0 8 8; 45 8 8; 90 8 8; 135 8 8; 180 8 8; 225 8 8; 270 8 8; 315 8 8" 
           dur="8s" calcMode="discrete" repeatCount="indefinite" />

        <rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/>
    </g>


</svg>

Thanks - exactly what I was looking for! – Hurricane Sep 16 '11 at 14:04 — Hurricane, Sep 16 '11 at 14:04

How to create an endless animation loop in SVG

1 Answers1

Linked