Récupération du cours SVG

examen3/avion.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
+  <path
+     d="m 800,41.803859 q 0,49.821051 -85.3257,135.146751 l -137.43737,137.43735 81.88976,427.20115 0.57266,3.43594 q 0,8.01718 -5.15391,13.17108 L 617.89548,794.8461 Q 612.74158,800 604.7244,800 592.69864,800 588.11739,789.69219 L 431.20972,460.41517 290.90909,600.71583 q 38.94058,136.29203 38.94058,144.30922 0,8.01718 -5.1539,13.17108 L 288.04581,794.8461 Q 282.8919,800 274.87472,800 q -10.30781,0 -16.03434,-9.1625 L 170.07874,630.49391 9.7351463,541.73228 Q 0,536.57838 0,525.69791 0,517.68073 5.1539015,512.52682 L 41.803865,475.30423 q 5.1539,-5.1539 13.171079,-5.1539 8.017182,0 144.309236,38.94058 L 339.58483,368.79026 10.307803,211.88261 Q 0,207.30136 0,195.27559 0,187.25841 5.1539015,182.10451 L 41.803865,145.45454 q 5.1539,-5.1539 13.171079,-5.1539 2.290624,0 3.435936,0.57266 L 485.61202,222.76306 623.04939,85.325699 Q 708.37509,0 758.19613,0 776.5211,0 788.26056,11.73944 800,23.47888 800,41.803859 Z"
+   />
+</svg>

examen3/index.md

@@ -0,0 +1,24 @@
+---
+layout: layouts/page.njk
+title: SVG - Évaluation 3
+---
+
+On vous demande de simuler la trajectoire d'un avion sur une carte.
+
+Concevoir une page html et insérer la carte de l'<a href="europe.svg" download>Europe</a>.
+
+L'opérateur ne veut pas voir toute la carte mais afficher uniquement une zone de 445px/380px à partir du point 155px/215px
+
+Ajouter un symbole <a href="avion.svg" download>avion</a> dans le fichier SVG.
+
+Placer le symbole de l'avion à l'origine de l'illustration. Sa taille dans l'illustration est de 10px/10px. Faire une rotation et une translation pour aligner le nez de l'avion avec l'axe des x (abscises).
+
+Ajouter un chemin sur la carte, le chemin aura une épaisseur de 2px et sera en pointillé de 5px.
+
+Attacher un événement sur le clic des cercles. Lors du clic sur le premier cercle définir le départ du chemin. Lors des clics suivants ajouter un segment de droite au chemin.
+
+Ajouter une animation de parcours sur le symbole de l'avion. Prendre comme référence de chemin la trajectoire dessinée précédemment. Effectuer une rotation automatique du symbole le long de la trajectoire. Ne pas redémarrer l'animation tant qu'elle est en cours.
+
+Calculer la distance entre 2 clics successifs sur les cercles. Calculer la distance euclidienne entre ces points. Calculer la durée de l'animation pour que la vitesse soit constante et de 20 px/seconde. 
+
+![](examen3.png)

examen3/solution3.md

@@ -0,0 +1,118 @@
+---
+layout: layouts/page.njk
+title: Solution de l'évaluation SVG n° 3
+---
+
+Ajouter le svg de la carte de l'Europe dans la page. Ajouter une propriété `viewbox` pour [recadrer](../../zone/) la carte.
+
+```svg
+<svg width="990.133" height="797.822" xmlns="http://www.w3.org/2000/svg" viewbox="155 215 445 380">
+```
+
+Ajouter un [symbole](../../bibliotheque/) dans un bloc de définition `defs`ne pas oublier le `viewbox` pour pouvoir le redimensionner plus tard
+
+```svg
+<defs>
+<symbol id="plane" viewBox="0 0 800 800">
+  <path  d="m 800,41.803859 q 0,49.821051 Z"/>
+</symbol>
+</defs>
+```
+
+Ajouter le symbole dans l'illustration. Appliquer deux [transformations](../../transformation) : une rotation de 45° et une translation pour aligner le nez de l'avion avec l'abscisse x=0
+
+```svg
+<use id="avion" x="0" href="#plane" width="10" height="10" transform="rotate(45) translate(-9 0)" />
+```
+Ajouter le [chemin](../../formes). Pour l'instant il ne contient qu'un point d'origine. 
+
+```svg
+<path id="trajectoire" d="M0,0" fill="none" stroke-dasharray="5 5" 
+  stroke-width="2" stroke="red"></path>
+```
+
+Attacher un événement `clic` sur les cercles.
+
+```javascript
+document.querySelectorAll("circle").forEach(ville => ville.addEventListener("click", evt => {
+```
+
+La fonction pour calculer la distance euclidienne entre 2 points
+
+```javascript
+function getDistance(x1, y1, x2, y2) {
+   return Math.sqrt( Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) );
+}
+```
+
+Déclaration des variables globales. L'élément svg avion, le cercle de départ, le chemin tel qu'il sera construit et la durée totale de l'animation
+
+```javascript
+let avion = document.querySelector("#avion");
+let depart;
+let path = "";
+let dur = 0;
+```
+
+Lors du clic, si le départ n'est pas encore défini, le définir et commencer le chemin par une commande **M** suivi d'une commande **L** pour les segments à venir
+
+```javascript
+if (depart) 
+{ }
+else {
+  depart = evt.currentTarget; 
+  path = `M${depart.getAttribute("cx")},${depart.getAttribute("cy")}L` ;
+}
+```
+
+Si il y a deja un départ. Prendre le point d'arrivée, calculer la longueur du segment (depart et arrivée). Calculer la durée totale en divisant par 20 le nombre de pixels de distance. Ajouter le point d'arrivée au chemin. Fixer l'arrivée comme le _prochain_ départ. 
+
+```javascript
+if (depart) 
+{ 
+  let arrivee = evt.currentTarget; 
+  let longueur = getDistance(arrivee.getAttribute("cx"), arrivee.getAttribute("cy"), 
+                             depart.getAttribute("cx"), depart.getAttribute("cy"));
+  dur += longueur / 20;
+  path += ` ${arrivee.getAttribute("cx")},${arrivee.getAttribute("cy")}`; 
+  depart = arrivee;
+}
+```
+
+Ajouter une [animation](../../animation) de chemin `animateMotion` avec comme référence la trajectoire.
+
+```svg
+<use id="avion" x="0" href="#plane" width="10" height="10" transform="rotate(45) translate(-9 0)" >
+  <animateMotion dur="5s" repeatCount="1" restart="whenNotActive" rotate="auto" fill="freeze">
+    <mpath href="#trajectoire"/>
+  </animateMotion>
+</use>
+```
+
+Si une durée a été calculée. Appliquer le chemin `path` construit à l'élément trajectoire. Fixer aussi la durée de l'animation et démarrer l'animation
+
+```javascript
+if (dur)
+{
+  let trajectoire = document.querySelector("#trajectoire");
+  trajectoire.setAttribute("d", path);
+
+  let anim = avion.querySelector("animateMotion");
+  anim.setAttribute("dur", `${dur}s`);
+  anim.beginElement();
+}
+```
+
+Si il n'y a pas encore de durée, stopper l'animation.
+
+```javascript
+else
+{
+  let anim = avion.querySelector("animateMotion");
+  anim.endElement();
+}
+```
+
+<a href="../reponse3" download>télécharger</a> la solution
+
+Voir la [solution](../reponse3)