aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/svg/tutorial/positions
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-11-01 07:51:45 +0100
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-11-07 11:57:29 +0100
commit88dda3c00eefc18a29447e99ebd3177925602b52 (patch)
treea184ddfe3825b6f05cba6d7586ea05c9375558a0 /files/fr/web/svg/tutorial/positions
parent7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a (diff)
downloadtranslated-content-88dda3c00eefc18a29447e99ebd3177925602b52.tar.gz
translated-content-88dda3c00eefc18a29447e99ebd3177925602b52.tar.bz2
translated-content-88dda3c00eefc18a29447e99ebd3177925602b52.zip
convert content to md
Diffstat (limited to 'files/fr/web/svg/tutorial/positions')
-rw-r--r--files/fr/web/svg/tutorial/positions/index.md49
1 files changed, 22 insertions, 27 deletions
diff --git a/files/fr/web/svg/tutorial/positions/index.md b/files/fr/web/svg/tutorial/positions/index.md
index 4a42fe000f..7bd225f2d9 100644
--- a/files/fr/web/svg/tutorial/positions/index.md
+++ b/files/fr/web/svg/tutorial/positions/index.md
@@ -8,51 +8,46 @@ tags:
translation_of: Web/SVG/Tutorial/Positions
original_slug: Web/SVG/Tutoriel/Positionnement
---
-<p>{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}</p>
+{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}
-<h3 id="La_grille">La grille</h3>
+### La grille
-<p>Pour chaque élément, SVG utilise un ensemble de coordonnées aussi appelé grille assez similaire à ce qui est utilisé dans <a href="/fr/HTML/Canvas" title="fr/HTML/Canvas">canvas</a> (et par tout un tas d'autres routines de dessin informatique). Dans le cas présent, le point en haut à gauche est considéré comme le point (0,0) ou point d'origine. Le positionnement est ensuite mesuré en pixel, depuis le coin supérieur gauche. Les valeurs positives de x vont vers la droite, les valeurs positives de y vont vers le bas. Notez que tout ceci est un peu contraire à la géométrie que l'on vous a enseignée. Ici, le positionnement fonctionne de la même manière que pour les éléments HTML.</p>
+Pour chaque élément, SVG utilise un ensemble de coordonnées aussi appelé grille assez similaire à ce qui est utilisé dans [canvas](/fr/HTML/Canvas "fr/HTML/Canvas") (et par tout un tas d'autres routines de dessin informatique). Dans le cas présent, le point en haut à gauche est considéré comme le point (0,0) ou point d'origine. Le positionnement est ensuite mesuré en pixel, depuis le coin supérieur gauche. Les valeurs positives de x vont vers la droite, les valeurs positives de y vont vers le bas. Notez que tout ceci est un peu contraire à la géométrie que l'on vous a enseignée. Ici, le positionnement fonctionne de la même manière que pour les éléments HTML.
-<img alt="" src="canvas_default_grid.png">
+![](canvas_default_grid.png)
-<h4 id="Exemple">Exemple</h4>
+#### Exemple
-<pre>&lt;rect x="0" y="0" width="100" height="100" /&gt;
-</pre>
+ <rect x="0" y="0" width="100" height="100" />
-<p>L'élément précédent définit un rectangle dans le coin supérieur gauche de l'écran, d'une taille de 100px par 100px.</p>
+L'élément précédent définit un rectangle dans le coin supérieur gauche de l'écran, d'une taille de 100px par 100px.
-<h3 id="Qu'est_ce_qu'un_pixel">Qu'est ce qu'un pixel ?</h3>
+### Qu'est ce qu'un pixel ?
-<p>Dans le cas le plus basique, un pixel dans un document SVG correspond à un pixel du périphérique de sortie, à savoir l'écran. Mais le SVG ne serait pas "scalable", c'est-à-dire évolutif, s'il n'y avait qu'une seule possibilité de gérer ce comportement. Tout comme les tailles de police absolues et relatives en CSS, SVG peut définir des unités absolues (avec des identifiants dimensionnels comme le "pt" ou encore le "cm") ou encore des unités dites définies par l'utilisateur, qui ne disposent pas de ces identifiants et correspondent à des nombres ordinaires.</p>
+Dans le cas le plus basique, un pixel dans un document SVG correspond à un pixel du périphérique de sortie, à savoir l'écran. Mais le SVG ne serait pas "scalable", c'est-à-dire évolutif, s'il n'y avait qu'une seule possibilité de gérer ce comportement. Tout comme les tailles de police absolues et relatives en CSS, SVG peut définir des unités absolues (avec des identifiants dimensionnels comme le "pt" ou encore le "cm") ou encore des unités dites définies par l'utilisateur, qui ne disposent pas de ces identifiants et correspondent à des nombres ordinaires.
-<p>Par défaut, l'unité utilisateur correspond à l'unité de l'écran. Pour modifier ce comportement de manière explicite, il existe plusieurs méthodes en SVG. Commençons par l'élément racine <code>svg</code> :</p>
+Par défaut, l'unité utilisateur correspond à l'unité de l'écran. Pour modifier ce comportement de manière explicite, il existe plusieurs méthodes en SVG. Commençons par l'élément racine `svg` :
-<pre>&lt;svg width="100" height="100"&gt;
-</pre>
+ <svg width="100" height="100">
-<p>La déclaration suivante crée un élément SVG d'une taille de 100px par 100px. Ici, une unité utilisateur correspond à l'unité de l'écran.</p>
+La déclaration suivante crée un élément SVG d'une taille de 100px par 100px. Ici, une unité utilisateur correspond à l'unité de l'écran.
-<pre>&lt;svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>&gt;
-</pre>
+ <svg width="200" height="200" viewBox="0 0 100 100">
-<p>L'image SVG suivante fait 200px par 200px. Toutefois, l'attribut <code>viewBox</code> définit que cet élément de 200 par 200 commence au point (0,0) et s'étend sur une grille de 100 unités sur 100 unités vers la droite et vers le bas de l'écran. 100 unités représentant 200 pixels, chaque unité vaut deux pixels : cela permet de doubler la taille de l'image.</p>
+L'image SVG suivante fait 200px par 200px. Toutefois, l'attribut `viewBox` définit que cet élément de 200 par 200 commence au point (0,0) et s'étend sur une grille de 100 unités sur 100 unités vers la droite et vers le bas de l'écran. 100 unités représentant 200 pixels, chaque unité vaut deux pixels : cela permet de doubler la taille de l'image.
-<p>La transformation des coordonnées réelles de l'écran en coordonnées personnalisées à l'aide d'un viewport permet de créer un <strong>système de coordonnées utilisateur</strong>. Celui-ci pourra pivoter, être zoomé, rendu oblique ou encore permettra de retourner une image. Par défaut, le système de coordonnées de l'utilisateur fait correspondre un pixel utilisateur à un pixel écran.</p>
+La transformation des coordonnées réelles de l'écran en coordonnées personnalisées à l'aide d'un viewport permet de créer un **système de coordonnées utilisateur**. Celui-ci pourra pivoter, être zoomé, rendu oblique ou encore permettra de retourner une image. Par défaut, le système de coordonnées de l'utilisateur fait correspondre un pixel utilisateur à un pixel écran.
-<p>Cependant, le périphérique peut décider lui-même ce qui correspond à un pixel.</p>
+Cependant, le périphérique peut décider lui-même ce qui correspond à un pixel.
-<p>Les tailles dans le fichier SVG ayant des unités spécifiques, tels que les "in" et les "cm", sont ensuite calculées de manière à les faire apparaître avec une échelle de 1:1 dans l'image résultante.</p>
+Les tailles dans le fichier SVG ayant des unités spécifiques, tels que les "in" et les "cm", sont ensuite calculées de manière à les faire apparaître avec une échelle de 1:1 dans l'image résultante.
-<p>Pour illustrer cette explication, rien de tel qu'une petite citation tirée des spécifications SVG 1.1 :</p>
+Pour illustrer cette explication, rien de tel qu'une petite citation tirée des spécifications SVG 1.1 :
-<blockquote>
-<p>[…] imaginons que le user agent peut déterminer à partir de son environnement que "1px" correspond à "0.2822222mm" (c'est-à-dire 90dpi). Ainsi, pour le traitement de chaque élément SVG : […] "1cm" équivaut à "35.43307px" (et donc à 35.43307 unités utilisateur)</p>
-</blockquote>
+> \[…] imaginons que le user agent peut déterminer à partir de son environnement que "1px" correspond à "0.2822222mm" (c'est-à-dire 90dpi). Ainsi, pour le traitement de chaque élément SVG : \[…] "1cm" équivaut à "35.43307px" (et donc à 35.43307 unités utilisateur)
-<p>{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}</p>
+{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}
-<p>Interwiki Languages Links</p>
+Interwiki Languages Links
-<p>{{ languages( { "en": "en/SVG/Tutorial/Positions"} ) }}</p>
+{{ languages( { "en": "en/SVG/Tutorial/Positions"} ) }}