doc-svg/examen2/reponse.md

layout, title

layout	title
layouts/page.njk	Évaluation 2

Le symbole, utilisation de currentColor pour gérer la deuxième couleur de remplissage.

<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

.occupe { fill:#ba6b6c; color: #ef9a9a; stroke:#ececec }
.reserve { fill:#5d99c6; color: #90caf9; stroke:#ececec }
.libre { fill:#75a478; color: #a5d6a7; stroke:#ececec }

<g id="cabine" transform="translate(200 280)">
</g>

Le champ de saisie et le bouton

<input id="rangees">
<button onclick="Appliquer()">Appliquer</button>

Effacer les éléments de la cabine avec un nouveau remplissage

let cabine = document.getElementById("cabine");
  while (cabine.lastChild)
    cabine.removeChild(cabine.lastChild);

Ajouter les sièges en rangées et en colonnes

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);
    }
  }
}