JavaScript vers SVG

Convertion de code

Sujet résolu

26 novembre 2011 à 21:32:56

Bonjour,

J'ai réalisé une petite animation en JavaScript grâce à <canvas> de l'HTML5, cette animation est simpliste et je me demandais juste si elle était faisable en SVG plus simplement.

Voici le code :

window.onload = function()
{
    var tab = [{x: 0, y: 50},{x: 50, y: 50},{x: 100, y: 50},{x: 150, y: 100},{x: 100, y: 100},{x: 50, y: 100}];
    var canvas = document.getElementById("Canvas");
    if(!canvas)
      alert("Impossible de récupérer le canvas");
    var cxt = canvas.getContext('2d');
    if(!cxt)
      alert("Impossible de récupérer le context");
    
    setInterval(anime, 1000/1);
    function anime()
    {
      cxt.clearRect(0, 0, canvas.width, canvas.height);
      for(var i = 0; i < tab.length ; i++)
        cxt.fillRect( tab[i].x, tab[i].y, 50, 50);
      tab[1].y = tab[1].y ? 0 : 50;
      tab[2].x = tab[2].x == 150 ? 100 : 150;
      tab[4].y = tab[4].y == 150 ? 100 : 150;
      tab[5].x = tab[5].x ? 0 : 50;
    }
}

En fait, je pourrais le faire en SVG je pense

, ce qui me pose problème, c'est la gestion du temps ... "Toutes les secondes, on fait ceci" ; Je ne sais pas comment on le fait en SVG ...
Quelqu'un connait la balise appropriée ?

Merci d'avance

🍊 - Étudiant - Codeur en C | Zeste de Savoir apprenez avec une communauté | Articles - ♡ Copying is an act of love.

GeoffreyZéro

26 novembre 2011 à 22:29:30

Exactement de la même façon.

@che

27 novembre 2011 à 5:02:34

Parfait merci, réponse claire et concise

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="200" height="200" xml:space="preserve">
  <g>
    <defs>
    <symbol id="carre" style="stroke: #000000; stroke-width: 0.5; stroke-linejoin: bevel;">
      <rect width="50" height="50" style="fill:#000" >
      </rect>
    </symbol>
  </defs>
    <use xlink:href="#carre" x="0" y="50"/>
    <use xlink:href="#carre" x="50" y="50" id="car1" />
    <use xlink:href="#carre" x="100" y="50" id="car2" />
    <use xlink:href="#carre" x="150" y="100"/>
    <use xlink:href="#carre" x="100" y="100" id="car3" />
    <use xlink:href="#carre" x="50" y="100" id="car4"/>
<script type="text/javascript">
var tab = [50, 100, 100, 50];

window.onload = function() 
{
  setInterval(a1, 1000);
  setInterval(a2, 1000);
  setInterval(a3, 1000);
  setInterval(a4, 1000);
}


function a1(){ tab[0] = tab[0] ? 0 : 50; document.getElementById('car1').setAttribute("y", tab[0]) }
function a2(){ tab[1] = tab[1] == 150 ? 100 : 150; document.getElementById('car2').setAttribute("x", tab[1]) }
function a3(){ tab[2] = tab[2] == 150 ? 100 : 150; document.getElementById('car3').setAttribute("y", tab[2]) }
function a4(){ tab[3] = tab[3] ? 0 : 50; document.getElementById('car4').setAttribute("x", tab[3]) }
</script>
  </g>
</svg>

🍊 - Étudiant - Codeur en C | Zeste de Savoir apprenez avec une communauté | Articles - ♡ Copying is an act of love.

GeoffreyZéro

27 novembre 2011 à 12:34:58

T'es obligé de faie 4 setInterval et de répéter getElementById à chaque itération ? Essaie d'optimiser un peu tout ça. Utilise des variables et un seul setInterval.