Snap svg

[Floky]

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?

  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!

[Floky]

Aggiungo qualche dettaglio cosi magari la mia richiesta � pi� chiara.

Per semplicit�, del codice postato sopra, teniamo solo

var svgEl = Snap("#svg");
var circle1 = svgEl.circle(250, 100, 50);
var text_circle1 = svgEl.text(250, 100 "D");
var group1 = svgEl.group(circle1, text_circle1);

group1.animate({transform: "r360,250,100"}, 3000);

che creer� questo

<g>
    <circle x="250" y="100" r="50"/>
    <text x="250" y="100"/>
</g>

Che � la STESSA identica cosa di questo esempio (per semplicit� tenete solo le prime 5 righe da var s a g0.animate)

http://svg.dabbles.info/snaptut-transform-groups

L'ultima riga

g0.animate({ 'transform' : 'r360,200,200' },4000);

Cambiando i due parametri (200, 200 rappresentano le cordinate x e y dall'elemento svg) si cambia il punto di rotazione.
In questo caso 200 e 200 rappresentano il centro del quadrato (150 + 50 (x) e 150 + 50 (y)) quindi il quadrato ruota nel suo punto centrale di 360 gradi. E funziona perfettamente.

Perch� il mio esempio che � identico non funziona?