Travaux Pratriques n°1 : Vous devez réaliser l'animation cette page
Enoncé :
- Le rond rouge doit disparaître lorsqu'on le survol.
- Le texte doit être changé en "Bonjour le monde !" lorsqu'il est cliqué.
- Le rectangle doit tourner autour de lui-même de 10° lorsqu'il est cliqué.
Encore une petite information : il est possible de modifier les attributs simples (position, largueur, hauteur) d'un objet svg en utilisant :
var x_val= parseFloat(ref_rectangle.attributes.x.value);
ref_rectangle.attributes.x.value="150";
Ah... J'oubliais ! Vous vous rappelez, lors de la deuxième étape nous avons choisi l'identifiant du document svg. Nous l'avions appelé (arbitrairement) "svgroot". Il va maintenant être nous être utile. En effet, pour effectuer des transformations plus élaborées (comme la rotation) il est nécessaire de sélectionner le document SVG dans son ensemble. A partir de là nous pouvons créer un outil "transformation" qui pourra s'appliquer aux objets de notre document.
Un bout de code pour vous aider à démarrer :
1 - notre_document_svg = document.getElementById("svgroot");
2 - transformation_de_notre_svg = notre_document_svg.createSVGTransform();
3 - transformation_de_notre_svg.setRotate(alpha,centre_x,centre_y);
4 - ref_rectangle.transform.baseVal.appendItem(transformation_de_notre_svg);
Dans ce code on récupère la référence de notre document svg (1). On contruit l'outil "transformation" (2). On fixe les paramètres de la rotation de l'outil "transformation" (3). On applique "transformation" à notre rectangle (4).
Si vous utilisez Chrome comme navigateur, il faudra ajouter la ligne chromeWorkaround(transformation_de_notre_svg,ref_rectangle);
. En effet, Chrome ne sait pas utiliser correctement la fonction setRotate()... pour l'instant.
Voilà... j'en ai déjà trop dit, à vous de jouer...