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} \).
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.
On reprend le même exemple que le précédent mais en utilisant l'attribut transform.
Avec une balise use
L'usage de la balise use mettra ici plus en évidence le fait
que l'on translate le premier triangle :
Avec une balise g.
On constate dans le code précédent que l'on n'obtient pas tout à fait ce que l'on veut. L'objet
image
conserve le style de l'objet initial.
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.
La balise g illustrée ci-dessus sert en général à créer un groupe d'objets sur lesquels
on applique des "propriétés" communes : couleur de remplissage, épaisseur de contour... ou même translation.
Un exemple
On dessine un disque et un triangle.
Puis on fait subir une même translation à ces deux objets.
On peut aussi regrouper les objets initiaux et translater le groupe :