Translation (dans le plan) : définition
Le plan est supposé muni d'un repère \( \left( O; \overrightarrow{i}, \overrightarrow{j} \right) \).
Soit \( \overrightarrow{u} \) un vecteur de coordonnées \( \left( a;b \right) \) dans ce repère.
On appelle image du point \( M(x;y) \) par la translation de vecteur \( \overrightarrow{u}(a;b) \),
le point \( N( x+a; y+b ) \).
L'image de M par la translation de vecteur \( \overrightarrow{u} \) est donc le point N tel que
\[ \overrightarrow{MN} = \overrightarrow{u} \]
On dit aussi que N est le translaté de M par la translation de vecteur \( \overrightarrow{u} \).
Illustration en SVG
On définit ci-dessous un triangle (avec l'instruction svg
polygon).
On définit ensuite l'image du triangle par la translation de vecteur \( \overrightarrow{u}(25;40) \).
On ajoute donc 25 aux abscisses des sommets du polygone et 40 aux ordonnées.
Translation SVG
On peut également utiliser les transformations prédéfinies en svg.
L'usage de la balise use mettra ici plus en évidence le fait
que l'on translate le premier triangle :
On constate dans le code précédent que l'on n'obtient pas tout à fait ce que l'on veut. L'objet
translaté conserve son style.
Ci-dessous, on montre une façon d'éviter cela : le style qui ne doit pas être conservé n'est
pas déclaré directement sur l'objet identifié par l'attribut id
mais déclaré sur une balise g qui encapsule le code de notre premier triangle.
Par contre le style que l'on veut conserver (ici l'épaisseur des traits) est déclaré dans le code du triangle,
cela évite d'avoir à répéter cette partie du style.
Translation SVG et path
On retrouve la notion de translation dans la différence entre L et l (voir la
page sur path).
On voit ci-dessous que le segment jaune est parallèle de même longueur que le segment rouge : la
lettre l minuscule signifie que l'on trace le segment [MN] avec M(10;30) et N de coordonnées
\( \left( x_M + 50; y_M + 20 \right) \).
N est donc dans ce cas le translaté de M dans la translation de
vecteur \( \left( 50; 20 \right) \).
Le code <path d="M x y l a b" /> a donc pour effet de tracer le segment [MN]
où M est le point de coordonnées (x;y) et N le point de coordonnées (x+a; y+b).
Tandis que la lettre L majuscule a pour effet de relier le point M au point de coordonnées (50;20).
Le code <path d="M x y L a b" /> a donc pour effet de tracer le segment [MN]
où M est le point de coordonnées (x;y) et N le point de coordonnées ( a; b).