diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-11-01 07:51:45 +0100 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-07 11:57:29 +0100 |
| commit | 88dda3c00eefc18a29447e99ebd3177925602b52 (patch) | |
| tree | a184ddfe3825b6f05cba6d7586ea05c9375558a0 /files/fr/web/svg/attribute/dx | |
| parent | 7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a (diff) | |
| download | translated-content-88dda3c00eefc18a29447e99ebd3177925602b52.tar.gz translated-content-88dda3c00eefc18a29447e99ebd3177925602b52.tar.bz2 translated-content-88dda3c00eefc18a29447e99ebd3177925602b52.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/svg/attribute/dx')
| -rw-r--r-- | files/fr/web/svg/attribute/dx/index.md | 441 |
1 files changed, 219 insertions, 222 deletions
diff --git a/files/fr/web/svg/attribute/dx/index.md b/files/fr/web/svg/attribute/dx/index.md index a77d19da24..9f2ae06637 100644 --- a/files/fr/web/svg/attribute/dx/index.md +++ b/files/fr/web/svg/attribute/dx/index.md @@ -6,289 +6,286 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/dx --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>dx</code></strong> indique un décalage sur l'axe x de la position d'un élément ou de son contenu.</p> +L'attribut **`dx`** indique un décalage sur l'axe x de la position d'un élément ou de son contenu. -<p>Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> +Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}} -<h2>Exemple</h2> +## Exemple -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> +```css hidden +html,body,svg { height:100% } +``` -<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Lignes indiquant la position des glyphes --> - <line x1="0" x2="100%" y1="50%" y2="50%" /> - <line x1="10%" x2="10%" y1="0" y2="100%" /> - <line x1="60%" x2="60%" y1="0" y2="100%" /> +```html +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Lignes indiquant la position des glyphes --> + <line x1="0" x2="100%" y1="50%" y2="50%" /> + <line x1="10%" x2="10%" y1="0" y2="100%" /> + <line x1="60%" x2="60%" y1="0" y2="100%" /> - <!-- Un texte de référence --> - <text x="10%" y="50%" fill="grey">SVG</text> + <!-- Un texte de référence --> + <text x="10%" y="50%" fill="grey">SVG</text> - <!-- Le même texte avec un décalage sur l'axe x --> - <text dx="50%" x="10%" y="50%">SVG</text> -</svg></pre> + <!-- Le même texte avec un décalage sur l'axe x --> + <text dx="50%" x="10%" y="50%">SVG</text> +</svg> +``` -<pre class="brush: css">line { +```css +line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; -}</pre> +} +``` -<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> +{{EmbedLiveSample('exemple', '100%', 200)}} -<h2 id="altGlyph">altGlyph</h2> +## altGlyph -<div class="warning"> - <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p> -</div> +> **Attention :** Depuis SVG2 {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé. -<p>Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour l'ensemble des glyphes.</p> +Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour l'ensemble des glyphes. -<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p> +S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + Liste de + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="feDropShadow">feDropShadow</h2> +## feDropShadow -<p>Pour {{SVGElement('feDropShadow')}}, <code>dx</code> définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p> +Pour {{SVGElement('feDropShadow')}}, `dx` définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>2</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>2</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="feOffset">feOffset</h2> +## feOffset -<p>Pour {{SVGElement('feOffset')}}, <code>dx</code> définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p> +Pour {{SVGElement('feOffset')}}, `dx` définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>0</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="glyphRef">glyphRef</h2> +## glyphRef -<div class="warning"> - <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.</p> -</div> +> **Attention :** Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé. -<p>Pour {{SVGElement('glyphRef')}}, <code>dx</code> définit le décalage x du glyphe, dans le système métrique de la police.</p> +Pour {{SVGElement('glyphRef')}}, `dx` définit le décalage x du glyphe, dans le système métrique de la police. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>0</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="text">text</h2> +## text -<p>Pour {{SVGElement('text')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p> +Pour {{SVGElement('text')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes. -<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p> +S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + Liste de + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h3 id="Exemple">Exemple</h3> - -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> - -<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Linges indiquant la position des glyphes --> - <line x1="0" x2="100%" y1="25%" y2="25%" /> - <line x1="0" x2="100%" y1="50%" y2="50%" /> - <line x1="0" x2="100%" y1="75%" y2="75%" /> - - <line x1="10%" x2="10%" y1="0" y2="100%" /> - <line x1="30%" x2="30%" y1="0" y2="100%" /> - <line x1="60%" x2="60%" y1="0" y2="100%" /> - - <!-- Le comportement change en fonction du nombre - de valeurs de l'attribut --> - <text dx="20%" x="10%" y="25%">SVG</text> - <text dx="0 10%" x="10%" y="50%">SVG</text> - <text dx="0 10% 20%" x="10%" y="75%">SVG</text> -</svg></pre> - -<pre class="brush: css">line { +### Exemple + +```css hidden +html,body,svg { height:100% } +``` + +```html +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Linges indiquant la position des glyphes --> + <line x1="0" x2="100%" y1="25%" y2="25%" /> + <line x1="0" x2="100%" y1="50%" y2="50%" /> + <line x1="0" x2="100%" y1="75%" y2="75%" /> + + <line x1="10%" x2="10%" y1="0" y2="100%" /> + <line x1="30%" x2="30%" y1="0" y2="100%" /> + <line x1="60%" x2="60%" y1="0" y2="100%" /> + + <!-- Le comportement change en fonction du nombre + de valeurs de l'attribut --> + <text dx="20%" x="10%" y="25%">SVG</text> + <text dx="0 10%" x="10%" y="50%">SVG</text> + <text dx="0 10% 20%" x="10%" y="75%">SVG</text> +</svg> +``` + +```css +line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; -}</pre> +} +``` -<p>{{EmbedLiveSample('text', '100%', 100)}}</p> +{{EmbedLiveSample('text', '100%', 100)}} -<h2 id="tref">tref</h2> +## tref -<div class="warning"> - <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.</p> -</div> +> **Attention :** Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé. -<p>Pour {{SVGElement('tref')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p> +Pour {{SVGElement('tref')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes. + +S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées. -<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p> -<p> </p> <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + Liste de + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="tspan">tspan</h2> +## tspan -<p> </p> -<p>Pour {{SVGElement('tspan')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p> -<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p> +Pour {{SVGElement('tspan')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes. -<p> </p> +S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées. -<table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> -</table> -<h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('Filters 1.0', '#element-attrdef-fedropshadow-dx', 'dx') }}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Définition initiale pour <code><feDropShadow></code></td> - </tr> - <tr> - <td>{{ SpecName('Filters 1.0', '#element-attrdef-feoffset-dx', 'dx') }}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Définition pour <code><feOffset></code></td> - </tr> - <tr> - <td>{{SpecName("SVG2", "text.html#TextElementDXAttribute", "dx")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour <code><text></code> et <code><tspan></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "filters.html#feOffsetDxAttribute", "dx")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><feOffset></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "text.html#AltGlyphElementDXAttribute", "dx")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><altGlyph></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "text.html#GlyphRefElementDXAttribute", "dx")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><glyphRef></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "text.html#TextElementDXAttribute", "dx")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><text></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "text.html#TSpanElementDXAttribute", "dx")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><tref></code> et <code><tspan></code></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + Liste de + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------- | +| {{ SpecName('Filters 1.0', '#element-attrdef-fedropshadow-dx', 'dx') }} | {{Spec2('Filters 1.0')}} | Définition initiale pour `<feDropShadow>` | +| {{ SpecName('Filters 1.0', '#element-attrdef-feoffset-dx', 'dx') }} | {{Spec2('Filters 1.0')}} | Définition pour `<feOffset>` | +| {{SpecName("SVG2", "text.html#TextElementDXAttribute", "dx")}} | {{Spec2("SVG2")}} | Définition pour `<text>` et `<tspan>` | +| {{SpecName("SVG1.1", "filters.html#feOffsetDxAttribute", "dx")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<feOffset>` | +| {{SpecName("SVG1.1", "text.html#AltGlyphElementDXAttribute", "dx")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<altGlyph>` | +| {{SpecName("SVG1.1", "text.html#GlyphRefElementDXAttribute", "dx")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<glyphRef>` | +| {{SpecName("SVG1.1", "text.html#TextElementDXAttribute", "dx")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<text>` | +| {{SpecName("SVG1.1", "text.html#TSpanElementDXAttribute", "dx")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<tref>` et `<tspan>` | |
