Récupération du cours SVG
This commit is contained in:
41
examen2/avion.svg
Executable file
41
examen2/avion.svg
Executable file
@@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="540" height="1122" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<style>
|
||||
.body { fill:#fff; stroke: #666; }
|
||||
.exit { fill:#666; stroke:none}
|
||||
.motor{ fill:#f2f2f2; stroke: none; }
|
||||
.wings { fill:#f2f2f2; stroke: none; }
|
||||
.fret { fill:#800080 }
|
||||
.glass { fill:#000; }
|
||||
.nose { fill:none; stroke:#000; stroke-width:1px }
|
||||
.closet { fill:#008080; stroke-width:1.08978; }
|
||||
@media (prefers-color-scheme:dark) {
|
||||
.body { fill:#333; stroke: #888; }
|
||||
.exit { fill:#888; stroke:none}
|
||||
.motor{ fill:#222; stroke: #444; }
|
||||
.wings { fill:#222; stroke: #444; }
|
||||
.fret { fill:#600060 }
|
||||
.glass { fill:#000; }
|
||||
.nose { fill:none; stroke:#000; stroke-width:1px }
|
||||
.closet { fill:#006060; stroke-width:1.08978; }
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g class="motor">
|
||||
<path style="stroke-width:1px" d="M504.96 308.244c-9.548-.215-15.55 23.123-18.843 37.174l.256 81.062 2.066 141.989s10.817 83.895 16.522 83.9c5.705-.006 16.521-83.9 16.521-83.9l2.067-141.989.258-81.062c-3.294-14.05-9.297-37.389-18.846-37.174z" transform="translate(-424.983 27.81)"/>
|
||||
<path style="stroke-width:1.17754px" d="M424.983 321.926H578.19" transform="translate(-424.983 27.81)"/>
|
||||
<path style="stroke-width:1px" d="M504.96 308.244c-9.548-.215-15.55 23.123-18.843 37.174l.256 81.062 2.066 141.989s10.817 83.895 16.522 83.9c5.705-.006 16.521-83.9 16.521-83.9l2.067-141.989.258-81.062c-3.294-14.05-9.297-37.389-18.846-37.174z" transform="translate(-39.828 27.39)"/>
|
||||
<path style="stroke-width:1.18px" d="M424.983 321.926H578.19" transform="translate(-39.828 27.39)"/>
|
||||
</g>
|
||||
<path class="wings" d="m353.383 421.355-312.89 1.69v139.894L352.864 564l152.813-.242V423.133z" />
|
||||
<path class="body" d="M270.318.5c-16.4 0-51.1 76.9-81 181.7-1 4-1.5 8.1-1.5 12.2v579.7c0 4.1.5 8.1 1.5 12.1 23.735 93.102 44.226 177.891 59.99 232.075L73.06 1044.293l-.567 77.137 412.34-.352-1.031-76.07-187.166-26.635c13.412-54.18 30.992-139.019 54.682-232.174 1-4 1.5-8 1.5-12.1V194.5c0-4.2-.602-8.3-1.602-12.3C320.716 79 286.518.5 270.318.5Z"/>
|
||||
<path class="nose" d="m234.722 52.646 70.463-.182"/>
|
||||
<path class="glass" d="m178.214 145.202-.258 29.56c15.464-11.893 24.525-13.296 32.528-13.554 0-6.325.258-29.043.258-29.043-9.748-.26-21.445 4.62-32.528 13.037zm-31.231 82.92c1.576-31.27 10.327-63.27 28.66-80.503l.364 28.842c-8.253 11.314-16.287 32.621-18.62 51.66zm129.519 0c-1.577-31.27-10.328-63.27-28.66-80.503l-.365 28.842c8.253 11.314 16.288 32.621 18.62 51.66zm-31.232-82.92.259 29.56c-15.464-11.893-24.526-13.296-32.529-13.554 0-6.325-.258-29.043-.258-29.043 9.748-.26 21.446 4.62 32.529 13.037z" transform="translate(58.017 -29.5)"/>
|
||||
<g class="exit">
|
||||
<path d="m182.117 247.6 7-8.3h7.1l-7.1 8.3 7.1 8.3h-7.1z"/>
|
||||
<path d="m192.317 247.6 7.1-8.3h7l-7 8.3 7 8.3h-7z"/>
|
||||
</g>
|
||||
<path class="closet" d="M286.217 212.6h61.3c.7 0 1.3.712 1.3 1.543v35.154c0 .832-.6 1.544-1.3 1.544h-61.3c-.7 0-1.3-.712-1.3-1.544v-35.154c.1-.95.6-1.544 1.3-1.544z"/>
|
||||
<path class="fret" d="m348.116 685.2-155.4.6-.56 95.233 44.932 121.029 70.669.012 40.75-122.378z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
30
examen2/index.md
Executable file
30
examen2/index.md
Executable file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
layout: layouts/page.njk
|
||||
title: Évaluation 2
|
||||
---
|
||||
|
||||
Un opérateur régional d'aviation vous demande de concevoir un système de réservation pour ses appareils.
|
||||
|
||||
Vous avez à votre disposition :
|
||||
- L'illustration de l'<a href="avion.svg" download>avion</a> vide
|
||||
- L'illustration d'un <a href="siege.svg" download>siège</a>
|
||||
|
||||
## Travail à faire
|
||||
|
||||
1. Incorporer l'illustration de l'avion dans une page html.
|
||||
2. Ajouter le siège comme un symbole réutilisable de l'illustration.
|
||||
3. Modifier le symbole pour qu'il puisse être colorier avec 3 couleurs, une pour le contour, une pour l'assise (rect) et une pour le dossier (path)
|
||||
|
||||
4. Créer 3 classes css pour représenter les 3 états des sièges : libre,
|
||||
réservé et occupé. Utiliser un générateur de nuances comme [material.io](https://material.io/resources/color/)
|
||||
|
||||
5. Ajouter une zone située à (200px, 280px) qui correspond à la cabine.
|
||||
|
||||
6. Ajouter dans la page html un champ de saisie qui permet de choisir un nombre de rangées entre 2 et 10. Ajouter un bouton "appliquer" pour ajouter, avec un script, le nombre sélectionné de rangées de sièges.
|
||||
Les rangées sont espacées de 40px verticalement, les sièges ont le statut libre. Les sièges d'une rangées sont placés horizontalement à 0, 28, 87 et 115.
|
||||
|
||||
7. Lorsque l'on clique sur un siège celui ci passe de l'état libre à réservé puis à occupé. Vérifier que les couleurs changent bien en fonction de son état.
|
||||
|
||||
Références :
|
||||
- https://www.seatguru.com/airlines/Air_Canada/Air_Canada_Dash_81.php
|
||||
- https://www.chronoaviation.com/flotte/dash-8-100
|
||||
101
examen2/plane.html
Executable file
101
examen2/plane.html
Executable file
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<input id="rangees">
|
||||
<button onclick="Appliquer()">Appliquer</button>
|
||||
<div>
|
||||
<svg width="540" height="1122" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<style>
|
||||
.body { fill:#fff; stroke: #666; }
|
||||
.exit { fill:#666; stroke:none}
|
||||
.motor{ fill:#f2f2f2; stroke: none; }
|
||||
.wings { fill:#f2f2f2; stroke: none; }
|
||||
.fret { fill:#800080 }
|
||||
.glass { fill:#000; }
|
||||
.nose { fill:none; stroke:#000; stroke-width:1px }
|
||||
.closet { fill:#008080; stroke-width:1.08978; }
|
||||
.occupe { fill:#ba6b6c; color: #ef9a9a; stroke:#ececec }
|
||||
.reserve { fill:#5d99c6; color: #90caf9; stroke:#ececec }
|
||||
.libre { fill:#75a478; color: #a5d6a7; stroke:#ececec }
|
||||
@media (prefers-color-scheme:dark) {
|
||||
.body { fill:#333; stroke: #888; }
|
||||
.exit { fill:#888; stroke:none}
|
||||
.motor{ fill:#222; stroke: #444; }
|
||||
.wings { fill:#222; stroke: #444; }
|
||||
.fret { fill:#600060 }
|
||||
.glass { fill:#000; }
|
||||
.nose { fill:none; stroke:#000; stroke-width:1px }
|
||||
.closet { fill:#006060; stroke-width:1.08978; }
|
||||
.occupe { fill:#ba6b6c; color: #ef9a9a; stroke:#ececec }
|
||||
.reserve { fill:#5d99c6; color: #90caf9; stroke:#ececec }
|
||||
.libre { fill:#75a478; color: #a5d6a7; stroke:#ececec }
|
||||
}
|
||||
</style>
|
||||
<symbol id="siege">
|
||||
<rect fill="currentColor" stroke-width=".7" width="20.749941"
|
||||
height="26.691616" x="2.7700462" y="0.35027146" ry="2.9567075"/>
|
||||
<path stroke-width=".7" d="M 2.5722259,2.8124281 A 2.2184138,2.2184138 0 0 0 0.35027964,5.0379069 V 25.657144 c 0,0.08831 0.007065,0.173093 0.0176625,0.257873 a 3.4335958,3.4335958 0 0 0 -0.0176625,0.328523 v 0.339121 c 0,1.872228 1.51191256,3.387673 3.39120576,3.387673 H 22.870005 a 3.3806082,3.3806082 0 0 0 3.384141,-3.391206 v -0.469823 a 2.2431413,2.2431413 0 0 0 0.04239,-0.452161 V 5.0379069 c 0,-1.2293121 -0.989102,-2.2254788 -2.225479,-2.2254788 H 23.212658 A 2.2219463,2.2219463 0 0 0 20.98718,5.0379069 V 22.8594 c -4.934911,1.928748 -10.06411,1.67794 -15.3240114,0 V 5.0379069 c 0,-1.2293121 -0.9891017,-2.2254788 -2.2254787,-2.2254788 z"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<g class="motor">
|
||||
<path style="stroke-width:1px" d="M504.96 308.244c-9.548-.215-15.55 23.123-18.843 37.174l.256 81.062 2.066 141.989s10.817 83.895 16.522 83.9c5.705-.006 16.521-83.9 16.521-83.9l2.067-141.989.258-81.062c-3.294-14.05-9.297-37.389-18.846-37.174z" transform="translate(-424.983 27.81)"/>
|
||||
<path style="stroke-width:1.17754px" d="M424.983 321.926H578.19" transform="translate(-424.983 27.81)"/>
|
||||
</g>
|
||||
<g class="motor">
|
||||
<path style="stroke-width:1px" d="M504.96 308.244c-9.548-.215-15.55 23.123-18.843 37.174l.256 81.062 2.066 141.989s10.817 83.895 16.522 83.9c5.705-.006 16.521-83.9 16.521-83.9l2.067-141.989.258-81.062c-3.294-14.05-9.297-37.389-18.846-37.174z" transform="translate(-39.828 27.39)"/>
|
||||
<path style="stroke-width:1.18px" d="M424.983 321.926H578.19" transform="translate(-39.828 27.39)"/>
|
||||
</g>
|
||||
<path class="wings" d="m353.383 421.355-312.89 1.69v139.894L352.864 564l152.813-.242V423.133z" />
|
||||
<path class="body" d="M270.318.5c-16.4 0-51.1 76.9-81 181.7-1 4-1.5 8.1-1.5 12.2v579.7c0 4.1.5 8.1 1.5 12.1 23.735 93.102 44.226 177.891 59.99 232.075L73.06 1044.293l-.567 77.137 412.34-.352-1.031-76.07-187.166-26.635c13.412-54.18 30.992-139.019 54.682-232.174 1-4 1.5-8 1.5-12.1V194.5c0-4.2-.602-8.3-1.602-12.3C320.716 79 286.518.5 270.318.5Z"/>
|
||||
<path class="closet" d="M286.217 212.6h61.3c.7 0 1.3.712 1.3 1.543v35.154c0 .832-.6 1.544-1.3 1.544h-61.3c-.7 0-1.3-.712-1.3-1.544v-35.154c.1-.95.6-1.544 1.3-1.544z"/>
|
||||
<path class="exit" d="m182.117 247.6 7-8.3h7.1l-7.1 8.3 7.1 8.3h-7.1z"/>
|
||||
<path class="exit" d="m192.317 247.6 7.1-8.3h7l-7 8.3 7 8.3h-7z"/>
|
||||
<path class="nose" d="m234.722 52.646 70.463-.182"/>
|
||||
<path class="fret" d="m348.116 685.2-155.4.6-.56 95.233 44.932 121.029 70.669.012 40.75-122.378z"/>
|
||||
<path class="glass" d="m178.214 145.202-.258 29.56c15.464-11.893 24.525-13.296 32.528-13.554 0-6.325.258-29.043.258-29.043-9.748-.26-21.445 4.62-32.528 13.037zm-31.231 82.92c1.576-31.27 10.327-63.27 28.66-80.503l.364 28.842c-8.253 11.314-16.287 32.621-18.62 51.66zm129.519 0c-1.577-31.27-10.328-63.27-28.66-80.503l-.365 28.842c8.253 11.314 16.288 32.621 18.62 51.66zm-31.232-82.92.259 29.56c-15.464-11.893-24.526-13.296-32.529-13.554 0-6.325-.258-29.043-.258-29.043 9.748-.26 21.446 4.62 32.529 13.037z" transform="translate(58.017 -29.5)"/>
|
||||
<g id="cabine" transform="translate(200 280)">
|
||||
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<script>
|
||||
function Appliquer()
|
||||
{
|
||||
const colonnes = [0, 28, 87, 115];
|
||||
|
||||
let rangees = document.getElementById("rangees").value;
|
||||
|
||||
let cabine = document.getElementById("cabine");
|
||||
while (cabine.lastChild)
|
||||
cabine.removeChild(cabine.lastChild);
|
||||
|
||||
for (let i = 0 ; i < rangees; i++)
|
||||
{
|
||||
for (let col = 0 ; col < colonnes.length; col++)
|
||||
{
|
||||
let siege = document.createElementNS("http://www.w3.org/2000/svg", "use");
|
||||
siege.setAttribute("href", "#siege");
|
||||
siege.setAttribute("y", i * 40);
|
||||
siege.setAttribute("x", colonnes[col]);
|
||||
siege.setAttribute("class", "libre");
|
||||
siege.addEventListener("click", (evt) => {
|
||||
let siege = evt.currentTarget;
|
||||
if (siege.classList.contains("libre"))
|
||||
siege.setAttribute("class", "reserve");
|
||||
else if (siege.classList.contains("reserve"))
|
||||
siege.setAttribute("class", "occupe");
|
||||
})
|
||||
cabine.appendChild(siege);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
70
examen2/reponse.md
Executable file
70
examen2/reponse.md
Executable file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
layout: layouts/page.njk
|
||||
title: Évaluation 2
|
||||
---
|
||||
|
||||
Le symbole, utilisation de **currentColor** pour gérer la deuxième couleur de remplissage.
|
||||
|
||||
```svg
|
||||
<symbol id="siege">
|
||||
<rect fill="currentColor" stroke-width=".7" width="20.749941"
|
||||
height="26.691616" x="2.7700462" y="0.35027146" ry="2.9567075"/>
|
||||
<path stroke-width=".7" d="M 2.5722259,2.8124281 A 2.2184138,2.2184138 0 0 0 z"/>
|
||||
</symbol>
|
||||
```
|
||||
|
||||
Les classes
|
||||
|
||||
```css
|
||||
.occupe { fill:#ba6b6c; color: #ef9a9a; stroke:#ececec }
|
||||
.reserve { fill:#5d99c6; color: #90caf9; stroke:#ececec }
|
||||
.libre { fill:#75a478; color: #a5d6a7; stroke:#ececec }
|
||||
```
|
||||
|
||||
```svg
|
||||
<g id="cabine" transform="translate(200 280)">
|
||||
</g>
|
||||
```
|
||||
|
||||
Le champ de saisie et le bouton
|
||||
|
||||
```html
|
||||
<input id="rangees">
|
||||
<button onclick="Appliquer()">Appliquer</button>
|
||||
```
|
||||
|
||||
Effacer les éléments de la cabine avec un nouveau remplissage
|
||||
|
||||
```javascript
|
||||
let cabine = document.getElementById("cabine");
|
||||
while (cabine.lastChild)
|
||||
cabine.removeChild(cabine.lastChild);
|
||||
```
|
||||
|
||||
Ajouter les sièges en rangées et en colonnes
|
||||
|
||||
```javascript
|
||||
const colonnes = [0, 28, 87, 115];
|
||||
let rangees = document.getElementById("rangees").value;
|
||||
|
||||
for (let i = 0 ; i < rangees; i++)
|
||||
{
|
||||
for (let col = 0 ; col < colonnes.length; col++)
|
||||
{
|
||||
let siege = document.createElementNS("http://www.w3.org/2000/svg", "use");
|
||||
siege.setAttribute("href", "#siege");
|
||||
siege.setAttribute("y", i * 40);
|
||||
siege.setAttribute("x", colonnes[col]);
|
||||
siege.setAttribute("class", "libre");
|
||||
siege.addEventListener("click", (evt) => {
|
||||
let siege = evt.currentTarget;
|
||||
if (siege.classList.contains("libre"))
|
||||
siege.setAttribute("class", "reserve");
|
||||
else if (siege.classList.contains("reserve"))
|
||||
siege.setAttribute("class", "occupe");
|
||||
})
|
||||
cabine.appendChild(siege);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
5
examen2/siege.svg
Executable file
5
examen2/siege.svg
Executable file
@@ -0,0 +1,5 @@
|
||||
<svg viewBox="0 0 27 31" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect fill="#ccc" stroke="#333" stroke-width=".7" width="20.749941"
|
||||
height="26.691616" x="2.7700462" y="0.35027146" ry="2.9567075"/>
|
||||
<path fill="#fff" stroke="#333" stroke-width=".7" d="M 2.5722259,2.8124281 A 2.2184138,2.2184138 0 0 0 0.35027964,5.0379069 V 25.657144 c 0,0.08831 0.007065,0.173093 0.0176625,0.257873 a 3.4335958,3.4335958 0 0 0 -0.0176625,0.328523 v 0.339121 c 0,1.872228 1.51191256,3.387673 3.39120576,3.387673 H 22.870005 a 3.3806082,3.3806082 0 0 0 3.384141,-3.391206 v -0.469823 a 2.2431413,2.2431413 0 0 0 0.04239,-0.452161 V 5.0379069 c 0,-1.2293121 -0.989102,-2.2254788 -2.225479,-2.2254788 H 23.212658 A 2.2219463,2.2219463 0 0 0 20.98718,5.0379069 V 22.8594 c -4.934911,1.928748 -10.06411,1.67794 -15.3240114,0 V 5.0379069 c 0,-1.2293121 -0.9891017,-2.2254788 -2.2254787,-2.2254788 z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 888 B |
0
examen2/solution.html
Executable file
0
examen2/solution.html
Executable file
12
examen2/svgo.config.js
Executable file
12
examen2/svgo.config.js
Executable file
@@ -0,0 +1,12 @@
|
||||
module.exports = {
|
||||
multipass: true, // boolean. false by default
|
||||
collapseGroups: true, // collapse useless groups
|
||||
cleanupIDs: true, // remove unused and minify used IDs
|
||||
convertTransform: true, // collapse multiple transforms into one, convert matrices to the short aliases, and much more
|
||||
convertStyleToAttrs: true, // convert styles into attributes
|
||||
convertColors: false,
|
||||
js2svg: {
|
||||
indent: 2, // string with spaces or number of spaces. 4 by default
|
||||
pretty: true, // boolean, false by default
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user