So erstellen Sie eine endlose Schleife animation in SVG

Ich bin neu in der SVG-Animation, und ich versuchte, Sie zu drehen, eine Gruppe-element, acht mal durch 45°. (45, 90, 135, 180, 225, 270, 315, 360).
Das Beispiel unten funktioniert gut für mich, aber wie erstelle ich eine endlose Schleife die gesamte animation? Jetzt ist es nur einmal ausgeführt wird.

Ich bin offen für andere Möglichkeiten...

Vielen Dank im Voraus

<?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>
InformationsquelleAutor Hurricane | 2011-09-14
  1. 3

    Wenn Sie ändern Ihr Beispiel zu verwenden, nur ein animateTransform-element, mit allen Winkeln in die values - Attribut verwenden, können Sie die repeatCount Attribut um die Anzahl, wie oft die animation wiederholt werden soll. Wenn die repeatCount ist auf unbegrenzt gesetzt, wird die animation immer wieder.

    Folgende Beispiel, das ich denke das tut, was Sie suchen.

    <?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>
    • Vielen Dank - genau was ich gesucht habe!
    InformationsquelleAutor Jonas Pegerfalk
Schreibe einen Kommentar