mobile immobile

Un carré aux bordures bicolores

Écrire un code svg permettant d'obtenir une figure telle que la suivante :

Aide

Obtenir une bordure à l'aide de stroke ne fonctionne pas puisque notre bordure doit présenter deux couleurs.

Une idée : créer en premier lieu deux triangles qui seront ensuite masqués par le carré. Seuls les bords des triangles apparaîtront encore, ce qui donne l'impression d'une bordure pour le carré.

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> bordure bicolore </title>
        
		 
    </head>
    <body>
 


<svg>
<polygon points="8 8, 52 52, 8 52"/>
<polygon points="8 8, 52 52, 52 8" fill="yellow"/>
<rect x="10" y="10" width="40" height="40" fill="#d46a6a"/>
</svg>
 
    </body>
</html>

Un carré aux bordures bicolores centré

Modifiez le code du lutin défini dans l'exercice précédent pour que le centre du lutin coïncide avec le centre du repère.

Aide

Revoir la notion de viewBox.

Un code possible

L'avantage de centrer sur l'origine est ici de souligner les symétries dans les coordonnées des points.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> bordure bicolore </title>
        
		 
    </head>
    <body>
 

<svg width="60" height="60" viewBox="-30 -30  60 60">
	
<!-- définition du lutin : -->
	<polygon points="-22 -22, 22 22, -22 22" fill="black"/>
	<polygon points="-22 -22, 22 22, 22 -22" fill="orange"/>
	<rect x="-20" y="-20" width="40" height="40" fill="#d46a6a"/>
	
	
<!-- un petit disque au centre pour vérification visuelle : -->
<circle cx="0" cy="0" r="5" fill="magenta" />
</svg>
 
    </body>
</html>

Une bestiole carrée

Ajoutez deux yeux à notre carré :

une aide

Relisez le cours sur les ellipses si nécessaire et les pages sur translations et rotations.

code svg

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> lutin au carré </title>
        
		 
    </head>
    <body>
 

<svg width="60" height="60" viewBox="-30 -30  60 60">
	
<!-- définition du lutin : -->
	<polygon points="-22 -22, 22 22, -22 22" fill="black"/>
	<polygon points="-22 -22, 22 22, 22 -22" fill="orange"/>
	<rect x="-20" y="-20" width="40" height="40" fill="#d46a6a"/>
	<ellipse  id="oeil1" cx="11" cy="-11" rx="5" ry="2" transform="rotate(-45,8,-2)"  fill="yellow"/>
	<use xlink:href="#oeil1" transform="translate(8,8)" />
	
 
</svg>
 
    </body>
</html>

Le lutin sur un manège

Codez :

une aide

Vous pouvez à nouveau utiliser une rotation.

En utilisant la balise <defs> </defs>, vous pouvez utiliser le code précédent du lutin tel quel sans qu'il soit dessiné. Puis utiliser la balise use pour lui faire subir la rotation désirée.

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> manège pour lutin carré </title>
        
		 
    </head>
    <body>
 
  
<svg width="600" height="600" viewBox="-300 -300  600 600">
	
	
<!--  couleur du disque du manège : -->
<defs>
<radialGradient id="couleurDisqueManege">
<stop offset="0%" stop-color="rgb(107,142,35)"/>
<stop offset="100%" stop-color="rgb(173,245,47)"/>
</radialGradient>
</defs>

<!-- le disque du manège :  -->
<circle cx="0" cy="0" r="300" fill="url(#couleurDisqueManege)" />

<!-- la définition du lutin : -->
<defs>
<g id="lutin">
	<polygon points="-22 -22, 22 22, -22 22" fill="black"/>
	<polygon points="-22 -22, 22 22, 22 -22" fill="white"/>
	<rect x="-20" y="-20" width="40" height="40" fill="#d46a6a"/>
	<ellipse  id="oeil1" cx="11" cy="-11" rx="5" ry="2" transform="rotate(-45,8,-2)"  fill="yellow"/>
	<use xlink:href="#oeil1" transform="translate(8,8)" />
</g>
</defs>

<!-- on tourne le lutin autour de son centre de 45 degrés : -->
<use xlink:href="#lutin" transform="rotate(-45, 0, 0)" /> 
  
</svg>
    </body>
</html>

Le lutin sur le bord du manège

Placez maintenant le lutin au bord du manège.

Codez :

une aide

Vous pouvez à nouveau utiliser une translation.

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> manège pour lutin carré </title>
        
		 
    </head>
    <body>
 
 
<svg width="600" height="600" viewBox="-300 -300  600 600">
	
	
<!--  couleur du disque du manège : -->
<defs>
<radialGradient id="couleurDisqueManege">
<stop offset="0%" stop-color="rgb(107,142,35)"/>
<stop offset="100%" stop-color="rgb(173,245,47)"/>
</radialGradient>
</defs>

<!-- le disque du manège :  -->
<circle cx="0" cy="0" r="300" fill="url(#couleurDisqueManege)" />

<!-- la définition du lutin (avec la tête tournée vers le haut) : -->
<defs>
<g id="lutinTourne">
	<g transform="rotate(-45, 0, 0)">
		<g id="lutin">
		<polygon points="-22 -22, 22 22, -22 22" fill="black"/>
		<polygon points="-22 -22, 22 22, 22 -22" fill="white"/>
		<rect x="-20" y="-20" width="40" height="40" fill="#d46a6a"/>
		<ellipse  id="oeil1" cx="11" cy="-11" rx="5" ry="2" transform="rotate(-45,8,-2)"  fill="yellow"/>
		<use xlink:href="#oeil1" transform="translate(8,8)" />
		</g>
	</g>
</g>
</defs>

<!-- on translate le lutin pour le mettre au bord du manège : -->
<use xlink:href="#lutinTourne" transform="translate(-270,0)" /> 
  
</svg>
    </body>
</html>

Un second client pour le manège

Placez maintenant un second lutin au bord du manège :

une aide

Utilisez une rotation autour du centre du disque du manège.

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> manège pour lutin carré </title>
        
		 
    </head>
    <body>
 
 

<svg width="600" height="600" viewBox="-300 -300  600 600">
	
	
<!--  couleur du disque du manège : -->
<defs>
<radialGradient id="couleurDisqueManege">
<stop offset="0%" stop-color="rgb(107,142,35)"/>
<stop offset="100%" stop-color="rgb(173,245,47)"/>
</radialGradient>
</defs>

<!-- le disque du manège :  -->
<circle cx="0" cy="0" r="300" fill="url(#couleurDisqueManege)" />

<!-- la définition du lutin (avec la tête tournée vers le haut) : -->
<defs>
<g id="lutinAuBord" transform="translate(-270,0)">
	<g transform="rotate(-45, 0, 0)" id="lutinTourne">
		<g id="lutin">
		<polygon points="-22 -22, 22 22, -22 22" fill="black"/>
		<polygon points="-22 -22, 22 22, 22 -22" fill="white"/>
		<rect x="-20" y="-20" width="40" height="40" fill="#d46a6a"/>
		<ellipse  id="oeil1" cx="11" cy="-11" rx="5" ry="2" transform="rotate(-45,8,-2)"  fill="yellow"/>
		<use xlink:href="#oeil1" transform="translate(8,8)" />
		</g>
	</g>
</g>
</defs>


<!-- affichage du lutin au bord : -->
<use xlink:href="#lutinAuBord" /> 
<!-- rotation de 15 degrés du lutin autour du centre du disque : -->
<use xlink:href="#lutinAuBord"  transform="rotate(15,0,0)"/> 
  
</svg>


    </body>
</html>

Le manège rempli au quart

Remplir le manège au quart :

une aide

Utilisez une rotation autour du centre du disque du manège.

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> manège pour lutin carré </title>
        
		 
    </head>
    <body>
 
 

<svg width="600" height="600" viewBox="-300 -300  600 600">
	
	
<!--  couleur du disque du manège : -->
<defs>
<radialGradient id="couleurDisqueManege">
<stop offset="0%" stop-color="rgb(107,142,35)"/>
<stop offset="100%" stop-color="rgb(173,245,47)"/>
</radialGradient>
</defs>

<!-- le disque du manège :  -->
<circle cx="0" cy="0" r="300" fill="url(#couleurDisqueManege)" />

<!-- la définition du lutin (avec la tête tournée vers le haut) : -->
<defs>
<g id="lutinAuBord" transform="translate(-270,0)">
	<g transform="rotate(-45, 0, 0)" id="lutinTourne">
		<g id="lutin">
		<polygon points="-22 -22, 22 22, -22 22" fill="black"/>
		<polygon points="-22 -22, 22 22, 22 -22" fill="white"/>
		<rect x="-20" y="-20" width="40" height="40" fill="#d46a6a"/>
		<ellipse  id="oeil1" cx="11" cy="-11" rx="5" ry="2" transform="rotate(-45,8,-2)"  fill="yellow"/>
		<use xlink:href="#oeil1" transform="translate(8,8)" />
		</g>
	</g>
</g>
</defs>


 
<!-- quelques lutins  : -->
<use xlink:href="#lutinAuBord" /> 
<use xlink:href="#lutinAuBord"  transform="rotate(15,0,0)"/> 
<use xlink:href="#lutinAuBord"  transform="rotate(30,0,0)"/> 
<use xlink:href="#lutinAuBord"  transform="rotate(45,0,0)"/> 
<use xlink:href="#lutinAuBord"  transform="rotate(60,0,0)"/> 
<use xlink:href="#lutinAuBord"  transform="rotate(75,0,0)"/> 
 

 
</svg>

    </body>
</html>

Un tour de manège

Complétez le tour de manège :

une aide

Donnez un nom au premier quart et faire subir une rotation à ce premier quart.

un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> un manège bien rempli </title>
        
		 
    </head>
<body>
 

<svg width="600" height="600" viewBox="-300 -300  600 600">
	
	
<!--  couleur du disque du manège : -->
<defs>
<radialGradient id="couleurDisqueManege">
<stop offset="0%" stop-color="rgb(107,142,35)"/>
<stop offset="100%" stop-color="rgb(173,245,47)"/>
</radialGradient>
</defs>

<!-- le disque du manège :  -->
<circle cx="0" cy="0" r="300" fill="url(#couleurDisqueManege)" />

<!-- la définition du lutin (avec la tête tournée vers le haut) : -->
<defs>
<g id="lutinAuBord" transform="translate(-270,0)">
	<g transform="rotate(-45, 0, 0)" id="lutinTourne">
		<g id="lutin">
		<polygon points="-22 -22, 22 22, -22 22" fill="black"/>
		<polygon points="-22 -22, 22 22, 22 -22" fill="white"/>
		<rect x="-20" y="-20" width="40" height="40" fill="#d46a6a"/>
		<ellipse  id="oeil1" cx="11" cy="-11" rx="5" ry="2" transform="rotate(-45,8,-2)"  fill="yellow"/>
		<use xlink:href="#oeil1" transform="translate(8,8)" />
		</g>
	</g>
</g>
</defs>


<g id="quartDeTour">
<!-- quelques lutins  : -->
<use xlink:href="#lutinAuBord" /> 
<use xlink:href="#lutinAuBord"  transform="rotate(15,0,0)"/> 
<use xlink:href="#lutinAuBord"  transform="rotate(30,0,0)"/> 
<use xlink:href="#lutinAuBord"  transform="rotate(45,0,0)"/> 
<use xlink:href="#lutinAuBord"  transform="rotate(60,0,0)"/> 
<use xlink:href="#lutinAuBord"  transform="rotate(75,0,0)"/> 
</g>


<use xlink:href="#quartDeTour" transform="rotate(90,0,0)"/> 
<use xlink:href="#quartDeTour" transform="rotate(180,0,0)"/> 
<use xlink:href="#quartDeTour" transform="rotate(270,0,0)"/> 
</svg>
 
 
</body>
</html>

Le succès du manège

On crée maintenant une deuxième rangée. Cette seconde rangée, plus sécurisée car intérieure, concerne des plus petits.

une aide

Plutôt que de créer à nouveau chaque lutin, ajoutez une balise groupe autour du code définissant la première rangée.

Il faut ensuite faire subir un "changement d'échelle autour du point centre du grand disque".

Pour un tel changement d'échelle autour d'un point, vous pouvez relire la page concernant scale().

un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> un manège bien rempli </title>
        
		 
    </head>
<body>
 

<svg width="600" height="600" viewBox="-300 -300  600 600">
	
	
<!--  couleur du disque du manège : -->
<defs>
<radialGradient id="couleurDisqueManege">
<stop offset="0%" stop-color="rgb(107,142,35)"/>
<stop offset="100%" stop-color="rgb(173,245,47)"/>
</radialGradient>
</defs>

<!-- le disque du manège :  -->
<circle cx="0" cy="0" r="300" fill="url(#couleurDisqueManege)" />

<!-- la définition du lutin (avec la tête tournée vers le haut) : -->
<defs>
<g id="lutinAuBord" transform="translate(-270,0)">
	<g transform="rotate(-45, 0, 0)" id="lutinTourne">
		<g id="lutin">
		<polygon points="-22 -22, 22 22, -22 22" fill="black"/>
		<polygon points="-22 -22, 22 22, 22 -22" fill="white"/>
		<rect x="-20" y="-20" width="40" height="40" fill="#d46a6a"/>
		<ellipse  id="oeil1" cx="11" cy="-11" rx="5" ry="2" transform="rotate(-45,8,-2)"  fill="yellow"/>
		<use xlink:href="#oeil1" transform="translate(8,8)" />
		</g>
	</g>
</g>
</defs>

<g id="rangeeExterieure">
	<g id="quartDeTour">
	<!-- quelques lutins  : -->
	<use xlink:href="#lutinAuBord" /> 
	<use xlink:href="#lutinAuBord"  transform="rotate(15,0,0)"/> 
	<use xlink:href="#lutinAuBord"  transform="rotate(30,0,0)"/> 
	<use xlink:href="#lutinAuBord"  transform="rotate(45,0,0)"/> 
	<use xlink:href="#lutinAuBord"  transform="rotate(60,0,0)"/> 
	<use xlink:href="#lutinAuBord"  transform="rotate(75,0,0)"/> 
	</g>


	<use xlink:href="#quartDeTour" transform="rotate(90,0,0)"/> 
	<use xlink:href="#quartDeTour" transform="rotate(180,0,0)"/> 
	<use xlink:href="#quartDeTour" transform="rotate(270,0,0)"/> 
</g>


<use xlink:href="#rangeeExterieure" transform="scale(0.85) rotate(7,0,0)" />


</svg>
</body>
</html>

Une troisième rangée

Tout est dans le titre ! A vous de codez. Cette troisième rangée est réservée aux petits.

une aide

On peut passer de la rangée 2 à la rangée 3 comme on est passé de la 1 à la 2.

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> un manège bien rempli </title>
        
		 
    </head>
<body>
 
<svg width="600" height="600" viewBox="-300 -300  600 600">
	
	
<!--  couleur du disque du manège : -->
<defs>
<radialGradient id="couleurDisqueManege">
<stop offset="0%" stop-color="rgb(107,142,35)"/>
<stop offset="100%" stop-color="rgb(173,245,47)"/>
</radialGradient>
</defs>

<!-- le disque du manège :  -->
<circle cx="0" cy="0" r="300" fill="url(#couleurDisqueManege)" />

<!-- la définition du lutin (avec la tête tournée vers le haut) : -->
<defs>
<g id="lutinAuBord" transform="translate(-270,0)">
	<g transform="rotate(-45, 0, 0)" id="lutinTourne">
		<g id="lutin">
		<polygon points="-22 -22, 22 22, -22 22" fill="black"/>
		<polygon points="-22 -22, 22 22, 22 -22" fill="white"/>
		<rect x="-20" y="-20" width="40" height="40" fill="#d46a6a"/>
		<ellipse  id="oeil1" cx="11" cy="-11" rx="5" ry="2" transform="rotate(-45,8,-2)"  fill="yellow"/>
		<use xlink:href="#oeil1" transform="translate(8,8)" />
		</g>
	</g>
</g>
</defs>

<g id="rangeeExterieure">
	<g id="quartDeTour">
	<!-- quelques lutins  : -->
	<use xlink:href="#lutinAuBord" /> 
	<use xlink:href="#lutinAuBord"  transform="rotate(15,0,0)"/> 
	<use xlink:href="#lutinAuBord"  transform="rotate(30,0,0)"/> 
	<use xlink:href="#lutinAuBord"  transform="rotate(45,0,0)"/> 
	<use xlink:href="#lutinAuBord"  transform="rotate(60,0,0)"/> 
	<use xlink:href="#lutinAuBord"  transform="rotate(75,0,0)"/> 
	</g>


	<use xlink:href="#quartDeTour" transform="rotate(90,0,0)"/> 
	<use xlink:href="#quartDeTour" transform="rotate(180,0,0)"/> 
	<use xlink:href="#quartDeTour" transform="rotate(270,0,0)"/> 
</g>


<use xlink:href="#rangeeExterieure" transform="scale(0.85) rotate(7,0,0)" />
<use xlink:href="#rangeeExterieure" transform="scale(0.73)" /

</svg>
 
</body>
</html>

A contre-sens

On ajoute trois rangées internes, qui tournent en sens inverse.

une aide

Englobez le code des trois premières rangées dans une balise g et utilisez à nouveau scale().

scale() peut prendre deux paramètres. Le premier paramètre agissant sur les abscisses, le second sur les ordonnées.

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> un manège bien rempli </title>
        
		 
    </head>
<body>
 
<svg width="600" height="600" viewBox="-300 -300  600 600">
	
	
<!--  couleur du disque du manège : -->
<defs>
<radialGradient id="couleurDisqueManege">
<stop offset="0%" stop-color="rgb(107,142,35)"/>
<stop offset="100%" stop-color="rgb(173,245,47)"/>
</radialGradient>
</defs>

<!-- le disque du manège :  -->
<circle cx="0" cy="0" r="300" fill="url(#couleurDisqueManege)" />

<!-- la définition du lutin (avec la tête tournée vers le haut) : -->
<defs>
<g id="lutinAuBord" transform="translate(-270,0)">
	<g transform="rotate(-45, 0, 0)">
		<polygon points="-22 -22, 22 22, -22 22" fill="black"/>
		<polygon points="-22 -22, 22 22, 22 -22" fill="white"/>
		<rect x="-20" y="-20" width="40" height="40" fill="#d46a6a"/>
		<ellipse  id="oeil1" cx="11" cy="-11" rx="5" ry="2" transform="rotate(-45,8,-2)"  fill="yellow"/>
		<use xlink:href="#oeil1" transform="translate(8,8)" />
		<polyline points="-15 -4,-16 16 ,4 15" stroke="red" stroke-width="3" fill="pink" />
	</g>
</g>
</defs>


<g id="rangeesExt">
	<g id="rangeeExterieure">
		<g id="quartDeTour">
		<!-- quelques lutins  : -->
		<use xlink:href="#lutinAuBord" /> 
		<use xlink:href="#lutinAuBord"  transform="rotate(15,0,0)"/> 
		<use xlink:href="#lutinAuBord"  transform="rotate(30,0,0)"/> 
		<use xlink:href="#lutinAuBord"  transform="rotate(45,0,0)"/> 
		<use xlink:href="#lutinAuBord"  transform="rotate(60,0,0)"/> 
		<use xlink:href="#lutinAuBord"  transform="rotate(75,0,0)"/> 
		</g>


		<use xlink:href="#quartDeTour" transform="rotate(90,0,0)"/> 
		<use xlink:href="#quartDeTour" transform="rotate(180,0,0)"/> 
		<use xlink:href="#quartDeTour" transform="rotate(270,0,0)"/> 
	</g>
	<use xlink:href="#rangeeExterieure" transform="scale(0.85) rotate(7,0,0)" />
	<use xlink:href="#rangeeExterieure" transform="scale(0.73)" />
</g>

<use xlink:href="#rangeesExt" transform="scale(0.5,-0.5) rotate(7,0,0)" />

</svg>

 
</body>
</html>