diff options
Diffstat (limited to 'files/fr/web/svg/attribute/dy/index.html')
| -rw-r--r-- | files/fr/web/svg/attribute/dy/index.html | 297 |
1 files changed, 297 insertions, 0 deletions
diff --git a/files/fr/web/svg/attribute/dy/index.html b/files/fr/web/svg/attribute/dy/index.html new file mode 100644 index 0000000000..2dd91bf46e --- /dev/null +++ b/files/fr/web/svg/attribute/dy/index.html @@ -0,0 +1,297 @@ +--- +title: dy +slug: Web/SVG/Attribute/dy +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/dy +--- +<div>{{SVGRef}}</div> + +<p>L'attribut <strong><code>dy</code></strong> indique un décalage sur l'axe y de la position d'un élément ou de son contenu.</p> + +<p>Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> + +<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 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Lignes indiquant la position des glyphes --> + <line x1="10%" x2="10%" y1="0" y2="100%" /> + <line x1="0" x2="100%" y1="30%" y2="30%" /> + <line x1="0" x2="100%" y1="80%" y2="80%" /> + + <!-- Un texte de référence --> + <text x="10%" y="30%" fill="grey">SVG</text> + + <!-- Le même texte avec un décalage sur l'axe y --> + <text dy="50%" x="10%" y="30%">SVG</text> +</svg></pre> + +<pre class="brush: css">line { + stroke: red; + stroke-width: .5px; + stroke-dasharray: 3px; +}</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="altGlyph">altGlyph</h2> + +<p class="warning"><strong>Attention:</strong> Depuis {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p> + +<p>Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, <code>dy</code> définit un décalge sur l'axe y pour tous les glyphes.</p> + +<p>S'il a plusieurs valeurs, <code>dy</code> définit un décalage sur l'axe y 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 la valeur <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs restantes sont ignorées.</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> +</table> + +<h2 id="feDropShadow">feDropShadow</h2> + +<p>Pour {{SVGElement('feDropShadow')}}, <code>dy</code> définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p> + +<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> +</table> + +<h2 id="feOffset">feOffset</h2> + +<p>Pour {{SVGElement('feOffset')}}, <code>dy</code> définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p> + +<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> +</table> + +<h2 id="glyphRef">glyphRef</h2> + +<p class="warning"><strong>Attention:</strong> Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.</p> + +<p>Pour {{SVGElement('glyphRef')}}, <code>dy</code> définit le décalage x du glyphe, dans le système métrique de la police.</p> + +<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> +</table> + +<h2 id="text">text</h2> + +<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> + +<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> +</table> + +<h3 id="Exemple">Exemple</h3> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Lignes horizontales --> + <line x1="0" x2="100%" y1="30" y2="30" /> + <line x1="0" x2="100%" y1="40" y2="40" /> + <line x1="0" x2="100%" y1="50" y2="50" /> + <line x1="0" x2="100%" y1="60" y2="60" /> + + <!-- Lignes verticales --> + <line x1="10" x2="10" y1="0" y2="100%" /> + <line x1="50" x2="50" y1="0" y2="100%" /> + <line x1="90" x2="90" y1="0" y2="100%" /> + + <!-- Le comportement change en fonction du nombre de valeurs de l'attribut --> + <text dy="20" x="10" y="30">SVG</text> + <text dy="0 10" x="50" y="30">SVG</text> + <text dy="0 10 20" x="90" y="30">SVG</text> +</svg></pre> + +<pre class="brush: css">line { + stroke: red; + stroke-width: .5px; + stroke-dasharray: 3px; +}</pre> + +<p>{{EmbedLiveSample('text', '100%', 100)}}</p> + +<h2 id="tref">tref</h2> + +<p class="warning"><strong>Attention:</strong> Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.</p> + +<p> </p> + +<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> + +<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> +</table> + +<h2 id="tspan">tspan</h2> + +<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> + +<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> +</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-dy', 'dy') }}</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-dy', 'dy') }}</td> + <td>{{Spec2('Filters 1.0')}}</td> + <td>Définition pour <code><feOffset></code></td> + </tr> + <tr> + <td>{{SpecName("SVG2", "text.html#TextElementDYAttribute", "dy")}}</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#feOffsetDyAttribute", "dy")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Définition initiale pour <code><feOffset></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "text.html#AltGlyphElementDYAttribute", "dy")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Définition initiale pour <code><altGlyph></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "text.html#GlyphRefElementDYAttribute", "dy")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Définition initiale pour <code><glyphRef></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "text.html#TextElementDYAttribute", "dy")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Définition initiale pour <code><text></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "text.html#TSpanElementDYAttribute", "dy")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Définition initiale pour <code><tref></code> et <code><tspan></code></td> + </tr> + </tbody> +</table> |