Ciao, da poco sto leggendo guide sull'uso di svg.

All'inizio ho cercato di usare svg inline con le su relative istruzioni inline e per qualche animazione semplice tramite animation CSS3.

Mi sono accorto però che le animazioni non andavano su IE11 (strano eh, di solito va sempre tutto su questo fantastico browser ) quindi sono passato alla libreria javascript Snap svg e sembrerebbe funzionare.

Mi confermate che IE11 non supporta animation CSS3? E' questo il motivo?

codice:
  var svgEl = Snap("#svg");


  var circle1 = svgEl.circle(250, 100, 50);
  var text_circle1 = svgEl.text(250, 100, "D");
  var circle2 = svgEl.circle(350, 200, 50);
  var text_circle2 = svgEl.text(350, 200, "E");
  var circle3 = svgEl.circle(250, 300, 50);
  var text_circle3 = svgEl.text(250, 300, "S");
  var circle4 = svgEl.circle(150, 200, 50);
  var text_circle4 = svgEl.text(150, 200, "I");


  var group1 = svgEl.group(circle1, text_circle1);
  var group2 = svgEl.group(circle2, text_circle2);
  var group3 = svgEl.group(circle3, text_circle3);
  var group4 = svgEl.group(circle4, text_circle4);


  circle1.attr({
    fill: "#FF8300",
    strokeWidth: 2,
    stroke: "#fff"
  });


  text_circle1.attr({
    "text-anchor": "middle",
    "alignment-baseline": "central",
    "font-size": "50px",
    fill: "#fff"
  });


  circle2.attr({
    fill: "#1A43FF",
    strokeWidth: 2,
    stroke: "#fff"
  });


  text_circle2.attr({
    "text-anchor": "middle",
    "alignment-baseline": "central",
    "font-size": "50px",
    fill: "#fff"
  }).transform("r90");


  circle3.attr({
    fill: "#4600DF",
    strokeWidth: 2,
    stroke: "#fff"
  });


  text_circle3.attr({
    "text-anchor": "middle",
    "alignment-baseline": "central",
    "font-size": "50px",
    fill: "#fff"
  });


  circle4.attr({
    fill: "#FFB400",
    strokeWidth: 2,
    stroke: "#fff"
  });


  text_circle4.attr({
    "text-anchor": "middle",
    "alignment-baseline": "central",
    "font-size": "50px",
    fill: "#fff"
  }).transform("r90");


  function animation2(){
    group1.animate({transform: "t-200,200 r360"}, 2000, mina.linear);
  }


  group1.animate({transform: "r270"}, 1000, mina.linear);
In questo esempio ho inserito delle forme base. Non so bene come strutturare la parte relative alle animazioni che vorrei fossero in sequenza.. Per ora ho provato come in qualche esempio che ho trovato dove la seconda animazione veniva richiamata come callback della prima.. però non mi sembra funzioni come vorrei. In animation2 parte solo la traslazione e non la rotazione.

Altri modi (semplici visto che sono all'inizio)?

Grazie!