Créer une animation SVG

Bonsoir !

Désolé pour la réponse assez tardive mais je vous la soumets malgré tout... (peut-être que ça servira à d'autres)

J'ai utilisé du JavaScript directement inclus dans le fichier SVG.

Voilà comment j'ai procédé brièvement :

• Je récupère l'icône dans une variable pour pouvoir la manipuler plus tard.

• J'applique un intervalle très court qui appelle une fonction de rotation.

• Dans cette fonction en question, je définis l'origine de mon icône.

• Puis j'applique une rotation en degrés.

• Je stocke le degré de rotation dans une variable en l'incrémentant de 1 (ou en la réinitialisant à 0 si elle vaut 360 degrés).

En espérant avoir été assez clair, le code est lui aussi commenté.

Démonstration : http://jsfiddle.net/d9JdJ/

<?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 onload="init(evt)" version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="1024px" height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
 <script type="text/javascript"><![CDATA[
        // On initialise le degré de la rotation à 0
    var deg = 0;
        // Fonction d'initialisation
    function init(evt) {
            // On récupère le document SVG
        if ( window.svgDocument == null )
            svgDocument = evt.target.ownerDocument;
            // Puis l'icône
        var icon = svgDocument.getElementById("reload");
            // On effectue l'animation de rotation avec un délais très court
        setInterval(function() { rotate(icon); }, 15);
    }
        // Fonction de rotation
    function rotate(el) {
            // On définit l'origine d'icône qui servira à la rotation
        el.style.webkitTransformOrigin = 'center center';
        el.MozTransformOrigin = 'center center';
            // On applique la rotation en degré (avec préfixage suivant les navigateurs)
        el.style.webkitTransform = 'rotate('+ deg +'deg)';
        el.style.mozTransform = 'rotate('+ deg +'deg)';
        el.style.msTransform = 'rotate('+ deg +'deg)';
        el.style.oTransform = 'rotate('+ deg +'deg)';
        el.style.transform = 'rotate('+ deg +'deg)';
            // On incrémente la rotation par pas de 1, tout en veillant à réinitialiser la variable à 0 si 360 degrés sont atteints
        (deg == 360) ? deg = 0 : deg += 1;
    }
    ]]></script>
<path id="reload" fill="#CCCCCC" d="M431.532,387.014c0-44.414,36.023-80.438,80.438-80.438c19.188,0,36.712,6.844,50.5,18.077l-31.627,30.097
    l99.945,11.367l0.805-107.242l-30.766,29.289C577.281,266.961,546.203,254,512.023,254C438.554,254,379,313.562,379,387.016
    c0,2.742,0.242-2.266,0.414,0.445l53.68,7.555C432.093,389.928,431.532,392.382,431.532,387.014z M642.71,382.194l-53.681-7.555
    c1.017,5.086,1.556,2.617,1.556,7.992c0,44.414-36.008,80.431-80.43,80.431c-19.133,0-36.602-6.798-50.383-17.97l31.595-30.078
    l-99.93-11.366l-0.812,107.25l30.789-29.312c23.531,21.141,54.57,34.055,88.688,34.055c73.468,0,133.023-59.555,133.023-133.008
    C643.125,379.897,642.875,384.905,642.71,382.194z" />
</svg>

Sur ce, bonne soirée !

Fabien.