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.