diff options
Diffstat (limited to 'files/fr/web/svg/attribute/text-anchor/index.html')
| -rw-r--r-- | files/fr/web/svg/attribute/text-anchor/index.html | 149 |
1 files changed, 76 insertions, 73 deletions
diff --git a/files/fr/web/svg/attribute/text-anchor/index.html b/files/fr/web/svg/attribute/text-anchor/index.html index 3ac25fe5db..8f094d8e97 100644 --- a/files/fr/web/svg/attribute/text-anchor/index.html +++ b/files/fr/web/svg/attribute/text-anchor/index.html @@ -2,92 +2,95 @@ title: text-anchor slug: Web/SVG/Attribute/text-anchor tags: - - Attribut SVG - - NeedsCompatTable - SVG - SVG Attribute translation_of: Web/SVG/Attribute/text-anchor +browser-compat: svg.attributes.presentation.text-anchor --- -<p>« <a href="/fr/docs/Web/SVG/Attribute" title="en/SVG/Attribute">Référence des attributs SVG </a></p> - -<p>L'attribut <code>text-anchor</code> est utilisé pour aligner un élément <code>text</code> par rapport à un point dont la position est définie au début "<code>start</code>", au milieu "<code>middle</code>" ou à la fin "<code>end</code>" de son contenu.</p> - -<p><code>text-anchor</code> s'applique à chaque morceau de texte (voir <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextChunks" title="http://www.w3.org/TR/SVG/text.html#TextChunks">"text-chunks" (anglais)</a>) d'un élément <code>text</code> donné. Chaque morceau de texte a une position initiale courante qui est représentée par un point dans le référentiel de coordonnées de l'utilisateur déterminée selon le contexte : par les valeurs des attributs {{ SVGAttr("x") }} et {{ SVGAttr("y") }} sur un élément {{ SVGElement("text") }}, par la position du premier caractère affiché d'un morceau de texte pour un élément {{ SVGElement("tspan") }}, {{ SVGElement("tref") }} ou {{ SVGElement("altGlyph") }} quels que soient les valeurs de ses attributs {{ SVGAttr("x") }} ou {{ SVGAttr("y") }} ou à la position initiale du texte d'un élément {{ SVGElement("textPath") }}.</p> - -<p>En tant qu'attribut de présentation, il peut aussi être utilisé directement comme une propriété dans une feuille de style CSS.</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="row">Catégories</th> - <td>Attribut de présentation</td> - </tr> - <tr> - <th scope="row">Valeur</th> - <td>start | middle | end | <strong title="valeur par défaut">inherit</strong></td> - </tr> - <tr> - <th scope="row">Animable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Document de spécification</th> - <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty" title="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty">SVG 1.1 (2ème Édition) (anglais)</a></td> - </tr> - </tbody> -</table> - -<dl> - <dt>start</dt> - <dd>Les caractères affichés sont alignés de manière à ce que le début du texte soit au même point que la position initiale du texte. Cela produit l'équivalent d'un alignement à gauche du texte latin dans son orientation usuelle (horizontale de gauche à droite). Pour les écritures de droite à gauche comme l'hébreu et l'arabe, c'est alors l'équivalent d'un alignement à droite. Pour certains textes asiatiques avec une orientation verticale de haut en bas, le résultat sera alors comparable à un alignement en haut.</dd> - <dt>middle</dt> - <dd>Les caractères sont affichés de manière à ce que le milieu du texte affiché soit la position initiale du texte. (Pour du texte sur un chemin <code>textPath</code>, le texte est dans un premier temps organisé virtuellement selon une ligne droite. Le point équidistant des extrémités horizontales du texte est alors déterminé. Puis, le texte est projeté sur le chemin <code>textPath</code> avec le point calculé précédemment placé à la position courante du texte.)</dd> - <dt>end</dt> - <dd>Les caractères sont alignés de sorte que la fin du texte soit au même point que la position initiale du texte. Cela produit l'équivalent d'un alignement à droite du texte latin dans son orientation usuelle (horizontale de gauche à droite). Pour les écritures de droite à gauche comme l'hébreu et l'arabe, c'est alors l'équivalent d'un alignement à gauche.</dd> -</dl> - -<h2 id="Exemple" name="Exemple">Exemple</h2> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="prolog token"><?xml version="1.0"?></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span> - <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - - <span class="comment token"><!-- Materialisation of anchors --></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>path</span> <span class="attr-name token">d</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>grey<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> +<div>{{SVGRef}}</div> +<p>L'attribut <strong><code>text-anchor</code></strong> est utilisé pour aligner (alignement de début, de milieu ou de fin) une chaîne de texte préformaté ou un texte auto-enveloppé dont la zone d'enveloppement est déterminée à partir de la propriété <a href="/fr/docs/Web/SVG/Attribute/inline-size"><code>inline-size</code></a> par rapport à un point donné. Elle ne s'applique pas aux autres types de texte auto-enveloppé. Pour ces cas, vous devez utiliser <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>. Pour le texte à plusieurs lignes, l'alignement a lieu pour chaque ligne.</p> - <span class="comment token"><!-- Anchors in action --></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">text-anchor</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>start<span class="punctuation token">"</span></span> - <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> +<p>L'attribut <code>text-anchor</code> est appliqué à chaque bloc de texte individuel dans un élément <a href="/fr/docs/Web/SVG/Element/text"><code><text></code></a> donné. Chaque fragment de texte a une position de texte actuelle initiale, qui représente le point du système de coordonnées de l'utilisateur résultant (selon le contexte) de l'application des attributs <a href="/fr/docs/Web/SVG/Attribute/x"><code>x</code></a> et <a href="/fr/docs/Web/SVG/Attribute/y"><code>y</code></a> sur l'élément <code><text></code>, toute valeur d'attribut <code>x</code> ou <code>y</code> sur un élément <a href="/fr/docs/Web/SVG/Element/tspan"><code><tspan></code></a>, <a href="/fr/docs/Web/SVG/Element/tref"><code><tref></code></a> ou <a href="/fr/docs/Web/SVG/Element/altGlyph"><code><altGlyph></code></a> assigné explicitement au premier caractère rendu dans un fragment de texte, ou la détermination de la position initiale du texte actuel pour un élément <a href="/fr/docs/Web/SVG/Element/textPath"><code><textPath></code></a>.</p> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">text-anchor</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>middle<span class="punctuation token">"</span></span> - <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>75<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>En tant qu'attribut de présentation, <code>text-anchor</code> peut être utilisé comme une propriété CSS.</p> +</div> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">text-anchor</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>end<span class="punctuation token">"</span></span> - <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>110<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> +<p>Cet attribut peut être utilisé pour les éléments SVG suivants :</p> - <span class="comment token"><!-- Materialisation of anchors --></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>75<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>110<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> +<ul> + <li><a href="/fr/docs/Web/SVG/Element/altGlyph"><code><altGlyph></code></a></li> + <li><a href="/fr/docs/Web/SVG/Element/text"><code><text></code></a></li> + <li><a href="/fr/docs/Web/SVG/Element/textPath"><code><textPath></code></a></li> + <li><a href="/fr/docs/Web/SVG/Element/tref"><code><tref></code></a></li> + <li><a href="/fr/docs/Web/SVG/Element/tspan"><code><tspan></code></a></li> +</ul> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="cdata token"><![CDATA[ -text{ +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> + <!-- Matérialisation des ancrages --> + <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" /> + + <!-- Ancres en action --> + <text text-anchor="start" x="60" y="40">A</text> + <text text-anchor="middle" x="60" y="75">A</text> + <text text-anchor="end" x="60" y="110">A</text> + + <!-- Matérialisation des ancrages --> + <circle cx="60" cy="40" r="3" fill="red" /> + <circle cx="60" cy="75" r="3" fill="red" /> + <circle cx="60" cy="110" r="3" fill="red" /> + + <style><![CDATA[ + text { font: bold 36px Verdana, Helvetica, Arial, sans-serif; -} -]]></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + } + ]]></style> +</svg></pre> + +<p>{{EmbedLiveSample("topExample", "120", "120")}}</p> +</div> + +<h2 id="usage_notes">Notes d'utilisation</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>start</code></td> + </tr> + <tr> + <th scope="row">Valeur</th> + <td><code>start</code> | <code>middle</code> | <code>end</code></td> + </tr> + <tr> + <th scope="row">Animable</th> + <td>discrete</td> + </tr> + </tbody> +</table> -<p><strong>Résultat</strong></p> +<dl> + <dt><code>start</code></dt> + <dd>Les caractères rendus sont alignés de telle sorte que le début de la chaîne de texte se trouve à la position initiale du texte courant. Pour un élément dont la valeur de propriété <a href="/fr/docs/Web/CSS/direction"><code>direction</code></a> est <code>ltr</code> (typique de la plupart des langues européennes), le côté gauche du texte est rendu à la position initiale du texte. Pour un élément dont la valeur de la propriété direction est <code>rtl</code> (typique de l'arabe et de l'hébreu), le côté droit du texte est rendu à la position initiale du texte. Pour un élément dont la direction du texte primaire est verticale (souvent typique des textes asiatiques), le côté supérieur du texte est rendu à la position initiale du texte.</dd> + <dt><code>middle</code></dt> + <dd>Les caractères rendus sont alignés de telle sorte que le milieu de la chaîne de texte se trouve à la position actuelle du texte. (Pour le texte sur un chemin, la chaîne de texte est d'abord disposée en ligne droite. Le point médian entre le début et la fin de la chaîne de texte est déterminé. Ensuite, la chaîne de texte est mappée sur le chemin avec ce point médian placé à la position actuelle du texte).</dd> + <dt><code>end</code></dt> + <dd>Les caractères rendus sont décalés de telle sorte que la fin du texte rendu résultant (position finale du texte actuel avant l'application de la propriété <code>text-anchor</code>) se trouve à la position initiale du texte actuel. Pour un élément avec une valeur de propriété <code>direction</code> égale à <code>ltr</code> (typique pour la plupart des langues européennes), le côté droit du texte est rendu à la position initiale du texte. Pour un élément avec une valeur de propriété <code>direction</code> égale à <code>rtl</code> (typique pour l'arabe et l'hébreu), le côté gauche du texte est rendu à la position initiale du texte. Pour un élément dont la direction primaire du texte est verticale (souvent typique des textes asiatiques), le bas du texte est rendu à la position initiale du texte.</dd> +</dl> -<p><a href="https://mdn.mozillademos.org/en-US/docs/Web/SVG/Attribute/text-anchor$samples/Example?revision=648557"><img alt="" src="http://img11.hostingpics.net/pics/616999AAA.png" title="Aperçu de Example?revision=648557"></a></p> +<h2 id="specifications">Spécifications</h2> -<h2 id="Éléments">Éléments</h2> +<p>{{Specifications}}</p> -<p>Les éléments suivants ont l'attribut <code>text-anchor</code></p> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<ul> - <li><a href="/fr/docs/Web/SVG/Element" title="en/SVG/Element#TextContent">Éléments contenant du texte</a> »</li> -</ul> +<p>{{Compat}}</p> |