HTML – SVG

<div id="vitMoyZoneAnim" class="vitZoneAnim">

	<h4>Mouvement de translation uniforme : trajectoire rectiligne et vitesse moyenne ou instantanée</h4>

	<svg width="600" height="200" id="vitMoyAnimSvg">
		<rect x="0" y="0" width="600" height="200" stroke-width="1" opacity="0.05" />
		<line x1="10" y1="100" x2="590" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" stroke-dasharray="2,5" />
		<circle id="AnimVitAng" cx="10" cy="100" r="10" stroke="red" stroke-width="1" fill="red" opacity="1.0">
			<animateTransform
				id="AnimVitMoyParam"
				attributeName="transform"
				type="translate"
				from="0"
				to="580"
				begin="0s"
				dur="5.0s"
				repeatCount="2"
				restart="whenNotActive"
			/>
		</circle>
	</svg>

	<div id="vitMoyTabBord" class="vitTabBord">

		<div class="vitTabBord-Element">
			<label for="vitMoyAnimReplay">Rejouer l'animation</label>
			<button id="vitMoyAnimReplay" type="button" onclick="VitMoyAnimReplay();">
				<i class="fas fa-redo"></i>
			</button>
		</div>

		<div  class="vitTabBord-Element">
			<label for="vitMoyTrajModif">Modifier la longueur de la trajectoire (entre 20 et 580 pixels) :</label>
			<input type="number" id="vitMoyTrajModif" value="580" min="20" max="580" onchange="VitMoyAnimModifTraj();">
		</div>

		<div  class="vitTabBord-Element">
			<label fo="vitMoyDureModif">Modifier la durée mise pour effectuer la trajectoire (valeur en seconde) : </label>
			<input type="number" id="vitMoyDureModif" value="5" min="1" onchange="VitMoyAnimModifDure();">
		</div>

		<div class="vitTabBord-Element vitTabBord-data">
			<div id="vitMoyTraj"></div>
			<div id="vitMoyDure"></div>
			<div id="vitMoyVale"></div>
		</div>

		<div class="vitTabBord-Element">

			<div>
				<span><i class="fas fa-code"></i> Code source de cette animation sous licence </span>
				<a href="https://creativecommons.org/licenses/by-nc/4.0/deed.fr" target="_blank">
					<img src="wv_images/by-nc.eu.svg" width="75" height="25"></img>
				</a>
			</div>

			<div>
				<label for="vitMoyAnimTelecharg"><i class="fas fa-code"></i> Télécharger le code source de cette animation</label>
										
				<button type="button">
					<a href="wv_telechargements/code_animVitMoySVG.rtf" download>
						<i class="fas fa-download"></i>
					</a>
				</button>

			</div>
		</div>

	</div><!-- /vitMoyTabBord –>
</div><!-- /vitMoyZoneAnim →

JAVASCRIPT

function VitMoyAnimReplay() {
	document.getElementById("AnimVitMoyParam").beginElement();
	VitMoyAnimMajAffichParam();
}

function VitMoyAnimModifTraj() {
	var val = document.getElementById('vitMoyTrajModif').value;
	document.getElementById("AnimVitMoyParam").setAttribute("to",val);
	document.getElementById("AnimVitMoyParam").beginElement();
	VitMoyAnimMajAffichParam();
}

function VitMoyAnimModifDure() {
	var val = document.getElementById('vitMoyDureModif').value;
	document.getElementById("AnimVitMoyParam").setAttribute("dur",val+"s");
	document.getElementById("AnimVitMoyParam").beginElement();
	VitMoyAnimMajAffichParam();
}

function VitMoyAnimMajAffichParam() {
	var largeurCm = document.getElementById('largeurEcranCm').value;
	var largeurPx = document.getElementById('largeurEcranPx').value;
	var vitMoyTrajPx = document.getElementById("AnimVitMoyParam").getAttribute("to");
	var vitMoyTrajCm = Math.round(vitMoyTrajPx/(largeurPx / largeurCm));
	document.getElementById("vitMoyTraj").innerHTML="Trajectoire réalisée : "+vitMoyTrajPx+" pixels, soit "+(Math.round(vitMoyTrajCm * 10000)/1000000)+" m (mètres)";
	var vitMoyDure = document.getElementById("AnimVitMoyParam").getAttribute("dur");
	vitMoyDure=vitMoyDure.substring(0, (vitMoyDure.length) -1);
	vitMoyDure=parseInt(vitMoyDure);
	document.getElementById("vitMoyDure").innerHTML="Cette trajectoire a été parcourue en : "+vitMoyDure+" s";
	document.getElementById("vitMoyVale").innerHTML="La vitesse moyenne de l'objet en mouvement est donc de : "+(Math.round((vitMoyTrajCm * 10000)/vitMoyDure)/1000000)+" m.s<sup>-1</sup>";
}

CSS

#vitMoyAnimReplay:hover, #vitAngAnimReplay:hover {
	cursor : pointer;
}

.vitZoneAnim {
	width:100%;
}

.vitTabBord {
	margin-left:51%;
	padding:5px;
}

.vitTabBord-Element input {
	width:10%;
}

.vitTabBord-data {
	color : blue;				
	background-color : #dddddd;
	margin-top : 5px;			
	margin-bottom : 5px;
	padding : 5px;
}