diff options
Diffstat (limited to 'files/fr/web/svg/attribute')
36 files changed, 532 insertions, 563 deletions
diff --git a/files/fr/web/svg/attribute/accent-height/index.html b/files/fr/web/svg/attribute/accent-height/index.html index e19d3c01bd..d720356008 100644 --- a/files/fr/web/svg/attribute/accent-height/index.html +++ b/files/fr/web/svg/attribute/accent-height/index.html @@ -34,7 +34,7 @@ translation_of: Web/SVG/Attribute/accent-height </tr> <tr> <th scope="row">Spécification</th> - <td><a class="external" href="https://www.w3.org/TR/SVG/fonts.html#FontFaceElementAccentHeightAttribute">SVG 1.1 (seconde édition)</a></td> + <td><a href="https://www.w3.org/TR/SVG/fonts.html#FontFaceElementAccentHeightAttribute">SVG 1.1 (seconde édition)</a></td> </tr> </tbody> </table> diff --git a/files/fr/web/svg/attribute/clip-path/index.html b/files/fr/web/svg/attribute/clip-path/index.html index a3ac7eba52..7aceae680c 100644 --- a/files/fr/web/svg/attribute/clip-path/index.html +++ b/files/fr/web/svg/attribute/clip-path/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/clip-path <p>L'attribut <strong><code>clip-path</code></strong> permet d'appliquer un détourage à un élément.</p> -<p class="note"><strong>Note:</strong> <code>clip-path</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>clip-path</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('use')}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clipPath id="myClip" clipPathUnits="objectBoundingBox"> @@ -43,8 +44,7 @@ translation_of: Web/SVG/Attribute/clip-path clip-path="circle() view-box" /> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="Notes_d'usage">Notes d'usage</h2> @@ -70,9 +70,11 @@ translation_of: Web/SVG/Attribute/clip-path <dd>une information supplémentaire pour dire comment une {{cssxref('basic-shape', 'forme CSS')}} est appliquée à un élément: <code>fill-box</code> indique d'utiliser la zone de sélection de l'objet ; <code>stroke-box</code> d'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément; <code>view-box</code> d'utiliser le document SVG parent.</dd> </dl> -<p class="note"><strong>Note:</strong> Pour plus d'informations sur la syntaxe de clip-path, voir la propriété CSS {{cssxref('clip-path')}}.</p> +<div class="note"> + <p><strong>Note:</strong> Pour plus d'informations sur la syntaxe de clip-path, voir la propriété CSS {{cssxref('clip-path')}}.</p> +</div> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2>Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.clip-path")}}</p> diff --git a/files/fr/web/svg/attribute/color/index.html b/files/fr/web/svg/attribute/color/index.html index 461a173d1b..d1475d4c18 100644 --- a/files/fr/web/svg/attribute/color/index.html +++ b/files/fr/web/svg/attribute/color/index.html @@ -10,7 +10,9 @@ translation_of: Web/SVG/Attribute/color <p>L'attribut <code>color</code> est utilisé pour définir indirectement une valeur potentielle (<code>currentColor</code>) pour les attributs {{ SVGAttr("fill") }}, {{ SVGAttr("stroke") }}, {{ SvgAttr("stop-color") }}, {{ SVGAttr("flood-color") }} et {{ SVGAttr("lighting-color") }}.</p> -<p class="note"><code>color</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS. Voir {{ cssxref("color","CSS color") }} pour plus d'informations.</p> +<div class="note"> + <p><strong>Note :</strong> <code>color</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS. Voir {{ cssxref("color","CSS color") }} pour plus d'informations.</p> +</div> <h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> @@ -22,7 +24,7 @@ translation_of: Web/SVG/Attribute/color </tr> <tr> <th scope="row">Valeur</th> - <td><a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a> | inherit</td> + <td><a href="/fr/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a> | inherit</td> </tr> <tr> <th scope="row">Animation</th> @@ -30,7 +32,7 @@ translation_of: Web/SVG/Attribute/color </tr> <tr> <th scope="row">Document normatif</th> - <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProperty">SVG 1.1 (2nd Edition)</a></td> + <td><a href="http://www.w3.org/TR/SVG11/color.html#ColorProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> </table> @@ -60,6 +62,6 @@ translation_of: Web/SVG/Attribute/color <li>{{ SVGElement("feSpecularLighting") }}</li> </ul> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.color")}}</p> diff --git a/files/fr/web/svg/attribute/conditional_processing/index.html b/files/fr/web/svg/attribute/conditional_processing/index.html index af14256f8c..fe0f0c644d 100644 --- a/files/fr/web/svg/attribute/conditional_processing/index.html +++ b/files/fr/web/svg/attribute/conditional_processing/index.html @@ -5,28 +5,26 @@ translation_of: Web/SVG/Attribute/Conditional_Processing --- <p>Les <em>attributs SVG de traitement conditionnel</em> sont tous les attributs qui peuvent être spécifiés sur des éléments SVG pour contrôler si l'élément sur lequel il s'applique doit s'afficher ou non.</p> -<div class="index"> <ul> - <li><a href="#attr-externalResourcesRequired">externalResourcesRequired</a></li> - <li><a href="#attr-requiredExtensions">requiredExtensions</a></li> - <li><a href="#attr-requiredFeatures">requiredFeatures</a></li> - <li><a href="#attr-systemLanguage">systemLanguage</a></li> + <li>externalResourcesRequired</li> + <li>requiredExtensions</li> + <li>requiredFeatures</li> + <li>systemLanguage</li> </ul> -</div> <h2 id="Attributs">Attributs</h2> <dl> - <dt id="attr-externalResourcesRequired">{{SVGAttr('externalResourcesRequired')}} {{deprecated_inline('svg2')}}</dt> + <dt>{{SVGAttr('externalResourcesRequired')}} {{deprecated_inline('svg2')}}</dt> <dd>Si sa valeur vaut <code>true</code>, cela indique que le navigateur doit attendre que toutes les ressources externes nécessaires au rendu de cet élément soient chargées avant de traiter l'élément associé.<br> <small><em>Valeur</em>: <strong><code>false</code></strong>|<code>true</code>; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt id="attr-requiredExtensions">{{SVGAttr('requiredExtensions')}}</dt> + <dt>{{SVGAttr('requiredExtensions')}}</dt> <dd>Liste toutes les fonctionnalités devant être prises en charge par le navigateur pour autoriser l'affichage de l'élément associé.<br> <small><em>Valeur</em>: Une liste d'URI séparées par des espaces; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt id="attr-requiredFeatures">{{SVGAttr('requiredFeatures')}} {{deprecated_inline('svg2')}}</dt> + <dt>{{SVGAttr('requiredFeatures')}} {{deprecated_inline('svg2')}}</dt> <dd>Liste toutes les fonctionnalités, <a href="https://www.w3.org/TR/SVG11/feature.html">telles que définies dans la spécification SVG 1.1</a>, devant être prises en charge par le navigateur pour autoriser l'affichage de l'élément associé.<br> <small><em>Valeur</em>: Une list d'URI séparées par espaces; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt id="attr-systemLanguage">{{SVGAttr('systemLanguage')}}</dt> + <dt>{{SVGAttr('systemLanguage')}}</dt> <dd>Indique la langue que l'utilisatteur doit avoir choisit pour autoriser l'affichage l'élément associé.<br> <small><em>Valeur</em>: Une liste d'<a href="http://www.ietf.org/rfc/bcp/bcp47.txt">ID de langage</a> séparés par des virgules; <em>Animation</em>: <strong>Non</strong></small></dd> </dl> diff --git a/files/fr/web/svg/attribute/core/index.html b/files/fr/web/svg/attribute/core/index.html index 7a7e1710b6..bb0b65989e 100644 --- a/files/fr/web/svg/attribute/core/index.html +++ b/files/fr/web/svg/attribute/core/index.html @@ -5,50 +5,48 @@ translation_of: Web/SVG/Attribute/Core --- <p>Les <em>attributs SVG de base</em> sont tous les attributs communs pouvant être spécifiés sur n'importe quel élément SVG.</p> -<div class="index"> <ul> - <li><a href="#attr-id"><code>id</code></a></li> - <li><a href="#attr-lang"><code>lang</code></a></li> - <li><a href="#attr-tabindex"><code>tabindex</code></a></li> - <li><a href="#attr-xml:base"><code>xml:base</code></a></li> - <li><a href="#attr-xml:lang"><code>xml:lang</code></a></li> - <li><a href="#attr-xml:space"><code>xml:space</code></a></li> + <li><code>id</code></li> + <li><code>lang</code></li> + <li><code>tabindex</code></li> + <li><code>xml:base</code></li> + <li><code>xml:lang</code></li> + <li><code>xml:space</code></li> </ul> -</div> <h2 id="Attributs">Attributs</h2> <dl> - <dt id="attr-id">{{SVGAttr('id')}}</dt> + <dt>{{SVGAttr('id')}}</dt> <dd>Définit un identifiant (ID) qui doit être unique dans tout le document. Son but est d'identifier l'élément pour pouvoir y faire référence plus tard, comme identificateur de fragment, dans du code, ou pour appliquer du style (avec CSS).<br> <small><em>Valuer</em>: Tout ID valide; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt id="attr-lang">{{SVGAttr('lang')}}</dt> + <dt>{{SVGAttr('lang')}}</dt> <dd> <p>Définit le langage de l'élément — la langue dans laquelle sont écrit les éléments non-éditables et celle dans laquelle devrait être écrits les éléments éditables. L'attribut prend pour valeur l'identifiant de la langue tel que définit dans le <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">document IETF "Tags for Identifying Languages" (BCP47)</a>.</p> <div class="note"> - <p>SVG 2 introduit l'attribut <code>lang</code>. Si les attributs <code>lang</code> et <code>xml:lang</code> sont tous les deux définis, <code>xml:lang</code> a la priorité sur <code>lang</code>.</p> + <p><strong>Note :</strong> SVG 2 introduit l'attribut <code>lang</code>. Si les attributs <code>lang</code> et <code>xml:lang</code> sont tous les deux définis, <code>xml:lang</code> a la priorité sur <code>lang</code>.</p> </div> <p><small><em>Valeur</em>: Tout ID de langage valide; <em>Animation</em>: <strong>Non</strong></small></p> </dd> - <dt id="attr-tabindex">{{SVGAttr('tabindex')}}</dt> + <dt>{{SVGAttr('tabindex')}}</dt> <dd>L'attribut SVG tabindex permet de contrôler si un élément peut prendre le focus et définit l'ordre relatif des éléments pour la navigation via tabulation.<br> <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Integer"><integer></a>; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt id="attr-xml:base">{{SVGAttr('xml:base')}}</dt> + <dt>{{SVGAttr('xml:base')}}</dt> <dd>Spécifie une IRI de base autre que celle du document.<br> <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#IRI"><IRI></a>; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt id="attr-xml:lang">{{SVGAttr('xml:lang')}}</dt> + <dt>{{SVGAttr('xml:lang')}}</dt> <dd> <p>C'est un attribut universel autorisé dans tous les documents XML pour définir le langage du texte présent dans l'élément. Son utilisation est presque identique à celle de l'attribut <a href="/fr/docs/Web/HTML/Attributs_universels/lang">lang</a> en HTML, hormis que les documents XML 1.0 ne permettent pas l'utilisation d'une valeur d'attribut nulle (<code>xml:lang=""</code>) pour indiquer un langage inconnu. À la place, utiliser <code>xml:lang="und"</code>.</p> <div class="note"> - <p>SVG 2 introduit l'attribut <code>lang</code>. Si les attributs <code>lang</code> et <code>xml:lang</code> sont tous les deux définis, <code>xml:lang</code> a la priorité sur <code>lang</code>.</p> + <p><strong>Note :</strong> SVG 2 introduit l'attribut <code>lang</code>. Si les attributs <code>lang</code> et <code>xml:lang</code> sont tous les deux définis, <code>xml:lang</code> a la priorité sur <code>lang</code>.</p> </div> <p><small><em>Valeur</em>: Tout ID de langage valide; <em>Animation</em>: <strong>Non</strong></small></p> </dd> - <dt id="attr-xml:space">{{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}}</dt> + <dt>{{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}}</dt> <dd> <p>SVG prend en charge l'attribut XML standard <code>xml:space</code> pour spécifier le traitement des caractères d'espaces dans les données d'un élément {{ SVGElement("text") }} donné.</p> diff --git a/files/fr/web/svg/attribute/cx/index.html b/files/fr/web/svg/attribute/cx/index.html index bb97ab6341..02eeedde0c 100644 --- a/files/fr/web/svg/attribute/cx/index.html +++ b/files/fr/web/svg/attribute/cx/index.html @@ -12,10 +12,9 @@ translation_of: Web/SVG/Attribute/cx <p>Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <radialGradient cx="25%" id="myGradient"> @@ -28,8 +27,7 @@ translation_of: Web/SVG/Attribute/cx <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" /> </svg></pre> -<p>{{EmbedLiveSample('topExample', 100, 100)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', 100, 100)}}</p> <h2 id="circle">circle</h2> @@ -52,7 +50,9 @@ translation_of: Web/SVG/Attribute/cx </tbody> </table> -<p class="note"><strong>Note:</strong> À partir de SVG2, <code>cx</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.</p> +<div class="note"> + <p><strong>Note:</strong> À partir de SVG2, <code>cx</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.</p> +</div> <h2 id="ellipse">ellipse</h2> @@ -75,11 +75,13 @@ translation_of: Web/SVG/Attribute/cx </tbody> </table> -<p class="note"><strong>Note:</strong> À partir de SVG2, <code>cx</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.</p> +<div class="note"> + <p><strong>Note :</strong> À partir de SVG2, <code>cx</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.</p> +</div> <h2 id="radialGradient">radialGradient</h2> -<p>Pour un élément {{SVGElement('radialGradient')}}, <code>cx</code> définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la <a href="/en-US/docs/SVG/Element/stop" title="/en-US/docs/SVG/Element/stop">limite du dégradé</a> à <strong>100%</strong> corresponde au périmètre de ce plus grand cercle.</p> +<p>Pour un élément {{SVGElement('radialGradient')}}, <code>cx</code> définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la <a href="/fr/docs/SVG/Element/stop" title="/en-US/docs/SVG/Element/stop">limite du dégradé</a> à <strong>100%</strong> corresponde au périmètre de ce plus grand cercle.</p> <table class="standard-table"> <tbody> @@ -98,11 +100,9 @@ translation_of: Web/SVG/Attribute/cx </tbody> </table> -<h4 id="Exemple">Exemple</h4> +<h4 id="autre_exemple">Autre exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> diff --git a/files/fr/web/svg/attribute/cy/index.html b/files/fr/web/svg/attribute/cy/index.html index 041e7bcdfd..24ec4c6c58 100644 --- a/files/fr/web/svg/attribute/cy/index.html +++ b/files/fr/web/svg/attribute/cy/index.html @@ -12,10 +12,9 @@ translation_of: Web/SVG/Attribute/cy <p>Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <radialGradient cy="25%" id="myGradient"> @@ -28,8 +27,7 @@ translation_of: Web/SVG/Attribute/cy <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" /> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 300)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 300)}}</p> <h2 id="circle">circle</h2> @@ -52,7 +50,9 @@ translation_of: Web/SVG/Attribute/cy </tbody> </table> -<p class="note"><strong>Note:</strong> À partir de SVG2, <code>cy</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.</p> +<div class="note"> + <p><strong>Note:</strong> À partir de SVG2, <code>cy</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.</p> +</div> <h2 id="ellipse">ellipse</h2> @@ -75,11 +75,13 @@ translation_of: Web/SVG/Attribute/cy </tbody> </table> -<p class="note"><strong>Note:</strong> À partir de SVG2, <code>cy</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.</p> +<div class="note"> + <p><strong>Note :</strong> À partir de SVG2, <code>cy</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.</p> +</div> <h2 id="radialGradient">radialGradient</h2> -<p>Pour un élément {{SVGElement('radialGradient')}}, <code>cy</code> définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la <a href="https://developer.mozilla.org/en-US/docs/SVG/Element/stop" title="/en-US/docs/SVG/Element/stop">limite de dégradé</a> de <strong>100%</strong> corresponde au périmètre de ce plus grand cercle.</p> +<p>Pour un élément {{SVGElement('radialGradient')}}, <code>cy</code> définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la <a href="/fr/docs/SVG/Element/stop" title="/en-US/docs/SVG/Element/stop">limite de dégradé</a> de <strong>100%</strong> corresponde au périmètre de ce plus grand cercle.</p> <table class="standard-table"> <tbody> @@ -98,11 +100,9 @@ translation_of: Web/SVG/Attribute/cy </tbody> </table> -<h4 id="Exemple">Exemple</h4> +<h4 id="autre_exemple">Autre exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> diff --git a/files/fr/web/svg/attribute/d/index.html b/files/fr/web/svg/attribute/d/index.html index 7aad4f3a04..8593128d7e 100644 --- a/files/fr/web/svg/attribute/d/index.html +++ b/files/fr/web/svg/attribute/d/index.html @@ -10,14 +10,13 @@ translation_of: Web/SVG/Attribute/d <p>L'attribut <strong><code>d</code></strong> définit un tracé à dessiner.</p> -<p>La définition d'un tracé est une liste de <a dir="ltr" href="/fr/docs/" id="#Path_commands">commandes de tracé</a> où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous.</p> +<p>La définition d'un tracé est une liste de commandes de tracé où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous.</p> <p>Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}}</p> -<div id="Example"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<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"> <path fill="none" stroke="red" @@ -28,7 +27,7 @@ translation_of: Web/SVG/Attribute/d Q 10, 60 10, 30 z" /> </svg></pre> -<p>{{EmbedLiveSample('Example', '100%', 200)}}</p> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="Tracé">Tracé</h2> @@ -53,7 +52,9 @@ translation_of: Web/SVG/Attribute/d <h2 id="glyph">glyph</h2> -<p class="warning"><strong>Attention :</strong> Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé.</p> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé.</p> +</div> <p>Pour un {{SVGElement('glyph')}}, <code>d</code> est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.</p> @@ -74,11 +75,15 @@ translation_of: Web/SVG/Attribute/d </tbody> </table> -<p class="note"><strong>Note :</strong> Le point d'origine (coordonnée <code>0,0</code>) est généralement le point du <em>coin en haut à gauche</em> du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe.</p> +<div class="note"> + <p><strong>Note :</strong> Le point d'origine (coordonnée <code>0,0</code>) est généralement le point du <em>coin en haut à gauche</em> du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe.</p> +</div> <h2 id="missing-glyph">missing-glyph</h2> -<p class="warning"><strong>Attention :</strong> Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé.</p> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé.</p> +</div> <p>Pour un {{SVGElement('missing-glyph')}}, <code>d</code> est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.</p> @@ -113,9 +118,11 @@ translation_of: Web/SVG/Attribute/d <li>Fermer le chemin (ClosePath)</li> </ul> -<p class="note"><strong>Note:</strong> Les commandes sont sensibles à la casse; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point.</p> +<div class="note"> + <p><strong>Note:</strong> Les commandes sont sensibles à la casse; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point.</p> +</div> -<p>Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions <code>x</code> et <code>y</code> seront interprétées commandes coordonnées négatives; des valeurs <code>x</code><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee; font-size: 13.6px; white-space: nowrap;"><strong> </strong></span></font>négatives se déplaceront vers la gauche; et des valeurs <code>y</code> négatives se déplaceront vers le haut.</p> +<p>Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions <code>x</code> et <code>y</code> seront interprétées commandes coordonnées négatives; des valeurs <code>x</code> négatives se déplaceront vers la gauche; et des valeurs <code>y</code> négatives se déplaceront vers le haut.</p> <h2 id="Moveto_(aller_à)">Moveto (aller à)</h2> @@ -150,21 +157,19 @@ translation_of: Web/SVG/Attribute/d <h2 id="Curveto">Curveto</h2> -<p>L'instruction Curveto trace une <a href="https://developer.mozilla.org/en-US/docs/User:Jt_Sandbox/Curves_in_Paths">courbe de Bézier</a>. Il existe deux types de courbes de Bézier : cubique et quadratique. Les courbes cubiques sont un cas particulier des courbes quadratiques puisque le point de contrôle est commun au point de départ et au point d'arrivée. La syntaxe d'une courbe quadratique de Bézier est "Q cx,cy x,y" ou "q dcx,dcy dx,dy". cx et cy sont les coordonnées absolues du point de contrôle tandis que dcx et dcy sont les coordonnées du point de contrôle relatives au point courant. x et y sont les coordonnées absolues du point d'arrivée tandis que dx et dy sont les coordonnées relatives de ce point par rapport au point courant.</p> +<p>L'instruction Curveto trace une courbe de Bézier. Il existe deux types de courbes de Bézier : cubique et quadratique. Les courbes cubiques sont un cas particulier des courbes quadratiques puisque le point de contrôle est commun au point de départ et au point d'arrivée. La syntaxe d'une courbe quadratique de Bézier est "Q cx,cy x,y" ou "q dcx,dcy dx,dy". cx et cy sont les coordonnées absolues du point de contrôle tandis que dcx et dcy sont les coordonnées du point de contrôle relatives au point courant. x et y sont les coordonnées absolues du point d'arrivée tandis que dx et dy sont les coordonnées relatives de ce point par rapport au point courant.</p> <p>Les courbes cubiques de Bézier suivent le même principe mais avec deux points de contrôle. La syntaxe de ces courbes est <code>C c1x, c1y c2x, c2y x, y</code> ou <code>c dc1x, dc1y dc2x, dc2y dx, dy</code>.</p> -<div> + <p>Pour réaliser des chaînes de courbes de Bézier "adoucies", il est possible d'utiliser les commandes T et S. Leur syntaxe est plus simple que les autres commandes Curveto car elles estiment que le premier point de contrôle est le symétrique du point de contrôle précédent par rapport au point terminal de la courbe précédente, ou que c'est le point précédent lui-même s'il n'y a pas eu de courbe tracée directement avant. La syntaxe de T est <code>T x, y</code> ou <code>t dx, dy</code> pour un point d'arrivée de position absolue ou relatives et sert à créer des courbes quadratiques de Bézier. S sert donc à faire des courbes cubiques de Bézier avec la syntaxe <code>S cx, cy x, y</code> ou <code>s dcx,dcy dx,dy</code>, où (d)cx indique le second point de contrôle.</p> <p>Finalement, toutes les commandes de courbes de Bézier peuvent servir de "polybézier" en spécifiant tous les paramètres successivement après la commande initiale. En conséquence, les deux commandes suivantes sont équivalentes en résultat :</p> -<div class="geckoVersionNote"> <p><code><path d="c 50, 0 50, 100 100, 100 50, 0 50, -100 100, -100" /><br> <path d="c 50, 0 50, 100 100, 100 c 50, 0 50, -100 100, -100" /></code></p> -</div> <h2 id="Arcto">Arcto</h2> @@ -177,7 +182,6 @@ translation_of: Web/SVG/Attribute/d <h2 id="ClosePath_(fermer_un_chemin)">ClosePath (fermer un chemin)</h2> <p>L'instruction ClosePath trace simplement une ligne droite de la position actuelle jusqu'au point initial de la courbe. C'est l'instruction la plus simple puisqu'elle n'attend aucun argument. Il n'y a pas de différence entre la version majuscule ("Z") et la version minuscule ("z").</p> -</div> <h2 id="Éléments">Éléments</h2> @@ -193,4 +197,3 @@ translation_of: Web/SVG/Attribute/d <h2 id="Notes">Notes</h2> <p>Le point d'origine (de coordonnées 0,0) est habituellement le <strong>coin supérieur gauche</strong> du contexte. Cependant, l'élément {{SVGElement("glyph")}} a son origine dans le <strong>coin inférieur gauche</strong> de la boîte contenant son caractère.</p> -</div> diff --git a/files/fr/web/svg/attribute/dx/index.html b/files/fr/web/svg/attribute/dx/index.html index 436b6dbd85..a77d19da24 100644 --- a/files/fr/web/svg/attribute/dx/index.html +++ b/files/fr/web/svg/attribute/dx/index.html @@ -12,10 +12,9 @@ translation_of: Web/SVG/Attribute/dx <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> +<h2>Exemple</h2> + +<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"> <!-- Lignes indiquant la position des glyphes --> @@ -36,12 +35,13 @@ translation_of: Web/SVG/Attribute/dx stroke-dasharray: 3px; }</pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="altGlyph">altGlyph</h2> -<p class="warning"><strong>Attention:</strong> Depuis SVG2 {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p> +</div> <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> @@ -108,7 +108,9 @@ translation_of: Web/SVG/Attribute/dx <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> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.</p> +</div> <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> @@ -154,9 +156,7 @@ translation_of: Web/SVG/Attribute/dx <h3 id="Exemple">Exemple</h3> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<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 --> @@ -185,9 +185,9 @@ translation_of: Web/SVG/Attribute/dx <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> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.</p> +</div> <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> diff --git a/files/fr/web/svg/attribute/dy/index.html b/files/fr/web/svg/attribute/dy/index.html index 2dd91bf46e..08d75f48a1 100644 --- a/files/fr/web/svg/attribute/dy/index.html +++ b/files/fr/web/svg/attribute/dy/index.html @@ -12,10 +12,9 @@ translation_of: Web/SVG/Attribute/dy <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> +<h2>Exemple</h2> + +<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"> <!-- Lignes indiquant la position des glyphes --> @@ -36,12 +35,13 @@ translation_of: Web/SVG/Attribute/dy stroke-dasharray: 3px; }</pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <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> +<div class="warning"> + <p><strong>Attention :</strong> Depuis {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p> +</div> <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> @@ -108,7 +108,9 @@ translation_of: Web/SVG/Attribute/dy <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> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.</p> +</div> <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> @@ -135,8 +137,6 @@ translation_of: Web/SVG/Attribute/dy <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> @@ -156,9 +156,7 @@ translation_of: Web/SVG/Attribute/dy <h3 id="Exemple">Exemple</h3> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"> <!-- Lignes horizontales --> @@ -188,16 +186,14 @@ translation_of: Web/SVG/Attribute/dy <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> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.</p> +</div> <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> @@ -217,14 +213,10 @@ translation_of: Web/SVG/Attribute/dy <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> diff --git a/files/fr/web/svg/attribute/fill-opacity/index.html b/files/fr/web/svg/attribute/fill-opacity/index.html index f25676d26c..82e5f456c3 100644 --- a/files/fr/web/svg/attribute/fill-opacity/index.html +++ b/files/fr/web/svg/attribute/fill-opacity/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/fill-opacity <p>L'attribut <strong><code>fill-opacity</code></strong> définit l'opacité du remplissage (<em>couleur, dégradé, motif</em>, etc) appliqué à une forme.</p> -<p class="note"><strong>Note:</strong> <code>fill-opacity</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>fill-opacity</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> <!-- Opacité par défaut: 1 --> @@ -36,8 +37,7 @@ translation_of: Web/SVG/Attribute/fill-opacity style="fill-opacity: .25;" /> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p> <h2 id="Notes_d'utilisation">Notes d'utilisation</h2> @@ -58,7 +58,9 @@ translation_of: Web/SVG/Attribute/fill-opacity </tbody> </table> -<p class="note"><strong>Note:</strong> SVG2 introduit les valeurs en pourcentage pour <code>fill-opacity</code>. Cependant, ce n'est pas souvent pris en charge pour le moment (<em>Voir {{anch('Compatibilité des navigateurs')}} ci-dessous</em>). Il est par conséquent recommandé d'utiiser les valeurs de l'intervalle <code>[0-1]</code>.</p> +<div class="note"> + <p><strong>Note :</strong> SVG2 introduit les valeurs en pourcentage pour <code>fill-opacity</code>. Cependant, ce n'est pas souvent pris en charge pour le moment (<em>Voir {{anch('Compatibilité des navigateurs')}} ci-dessous</em>). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle <code>[0-1]</code>.</p> +</div> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/svg/attribute/fill-rule/index.html b/files/fr/web/svg/attribute/fill-rule/index.html index 63503dc77b..04872838d2 100644 --- a/files/fr/web/svg/attribute/fill-rule/index.html +++ b/files/fr/web/svg/attribute/fill-rule/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/fill-rule <p>L'attribut <strong><code>fill-rule</code></strong> définit l'algorithme à utiliser pour déterminer les parties qui sont considérées <em>à l'intérieur</em> de la forme.</p> -<p class="note"><strong>Note:</strong> <code>fill-rule</code> est un attribut de présentation et peut donc être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>fill-rule</code> est un attribut de présentation et peut donc être utilisé comme propriété CSS.</p> +</div> <p>Cet attribut peut être appliqué à n'importe quel élément mais n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- Valeur par défaut pour fill-rule --> @@ -34,9 +35,8 @@ translation_of: Web/SVG/Attribute/fill-rule <polygon fill-rule="evenodd" stroke="red" points="150,0 121,90 198,35 102,35 179,90"/> </svg></pre> -</div> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="Usage">Usage</h2> @@ -67,9 +67,7 @@ translation_of: Web/SVG/Attribute/fill-rule <h4 id="Exemple">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> <!-- Effet de la règle de remplissage sur les segments qui se croisent --> @@ -103,9 +101,7 @@ translation_of: Web/SVG/Attribute/fill-rule <h4 id="Exemple_2">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> <!-- Effet de la règle de remplissage sur les segments qui se croisent --> @@ -133,7 +129,7 @@ translation_of: Web/SVG/Attribute/fill-rule <p>{{EmbedLiveSample('evenodd', '100%', 200)}}</p> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.fill-rule")}}</p> diff --git a/files/fr/web/svg/attribute/fill/index.html b/files/fr/web/svg/attribute/fill/index.html index c798d383fd..bca17a20a8 100644 --- a/files/fr/web/svg/attribute/fill/index.html +++ b/files/fr/web/svg/attribute/fill/index.html @@ -14,10 +14,9 @@ translation_of: Web/SVG/Attribute/fill <p>Pour les animations, il s'applique à cinq éléments: {{SVGElement('animate')}}, {{SVGElement('animateColor')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, et {{SVGElement('set')}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- Remplir avec une simple couleur --> @@ -42,12 +41,13 @@ translation_of: Web/SVG/Attribute/fill </svg> </pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="altGlyph">altGlyph</h2> -<p class="warning"><strong>Attention:</strong> {{SVGElement('altGlyph')}} est déprécié en SVG2 et ne devrait pas être utilisé.</p> +<div class="warning"> + <p><strong>Attention :</strong> {{SVGElement('altGlyph')}} est déprécié en SVG2 et ne devrait pas être utilisé.</p> +</div> <p>Pour {{SVGElement('altGlyph')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du glyphe.</p> @@ -68,7 +68,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <h2 id="animate">animate</h2> @@ -93,7 +95,9 @@ translation_of: Web/SVG/Attribute/fill <h2 id="animateColor">animateColor</h2> -<p class="warning"><strong>Attention:</strong> {{SVGElement('animateColor')}} est déprécié en SVG2 et ne devrait pas être utilisé. Utiliser {{SVGElement('animate')}} à la place.</p> +<div class="warning"> + <p><strong>Attention :</strong> {{SVGElement('animateColor')}} est déprécié en SVG2 et ne devrait pas être utilisé. Utiliser {{SVGElement('animate')}} à la place.</p> +</div> <p>Pour {{SVGElement('animateColor')}}, <code>fill</code> définit l'état final de l'animation.</p> @@ -177,7 +181,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <h2 id="ellipse">ellipse</h2> @@ -200,7 +206,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <h2 id="path">path</h2> @@ -223,7 +231,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <h2 id="polygon">polygon</h2> @@ -246,7 +256,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <h2 id="polyline">polyline</h2> @@ -269,7 +281,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <h2 id="rect">rect</h2> @@ -292,7 +306,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <h2 id="set">set</h2> @@ -336,7 +352,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <h2 id="textPath">textPath</h2> @@ -359,11 +377,15 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <h2 id="tref">tref</h2> -<p class="warning"><strong>Attention:</strong> {{SVGElement('tref')}} est déprécié en SVG2 et ne devrait pas être utilisé.</p> +<div class="warning"> + <p><strong>Attention :</strong> {{SVGElement('tref')}} est déprécié en SVG2 et ne devrait pas être utilisé.</p> +</div> <p>Pour {{SVGElement('tref')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du texte.</p> @@ -384,7 +406,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <h2 id="tspan">tspan</h2> @@ -407,7 +431,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <h2 id="Spécifications">Spécifications</h2> @@ -429,7 +455,7 @@ translation_of: Web/SVG/Attribute/fill <td>{{SpecName("SVG2", "painting.html#FillProperty", "fill")}}</td> <td>{{Spec2("SVG2")}}</td> <td>Définition pour les formes et le texte.<br> - Ajoute <code style="white-space: nowrap;">context-fill</code> et <code style="white-space: nowrap;">context-stroke</code>.</td> + Ajoute <code>context-fill</code> et <code>context-stroke</code>.</td> </tr> <tr> <td>{{SpecName("SVG1.1", "animate.html#FillAttribute", "fill")}}</td> @@ -444,8 +470,10 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.fill")}}</p> -<p class="note"><strong>Note:</strong> Pour plus d'informations sur les valeurs de <code style="white-space: nowrap;">context-fill</code> (et <code style="white-space: nowrap;">context-stroke</code>) dans des documents HTML, voir la documentation pour la propriété non-standard <span style="white-space: nowrap;">{{cssxref("-moz-context-properties")}}</span>.</p> +<div class="note"> + <p><strong>Note :</strong> Pour plus d'informations sur les valeurs de <code>context-fill</code> (et <code>context-stroke</code>) dans des documents HTML, voir la documentation pour la propriété non-standard {{cssxref("-moz-context-properties")}}.</p> +</div> diff --git a/files/fr/web/svg/attribute/height/index.html b/files/fr/web/svg/attribute/height/index.html index bb08f32bcd..d0caca7baf 100644 --- a/files/fr/web/svg/attribute/height/index.html +++ b/files/fr/web/svg/attribute/height/index.html @@ -6,7 +6,7 @@ tags: - SVG translation_of: Web/SVG/Attribute/height --- -<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>« <a href="/fr/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> <p>Cet attribut indique une dimension verticale <code><length></code> dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la hauteur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).</p> @@ -22,7 +22,7 @@ translation_of: Web/SVG/Attribute/height </tr> <tr> <th scope="row">Valeur</th> - <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></td> + <td><a href="/fr/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></td> </tr> <tr> <th scope="row">Animable</th> @@ -30,14 +30,14 @@ translation_of: Web/SVG/Attribute/height </tr> <tr> <th scope="row">Documents normatif</th> - <td><a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementHeightAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementHeightAttribute">SVG 1.1 (2nd Edition): image element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementHeightAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementHeightAttribute">SVG 1.1 (2nd Edition): rect element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute">SVG 1.1 (2nd Edition): svg element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementHeightAttribute">SVG 1.1 (2nd Edition): use element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveHeightAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementHeightAttribute">SVG 1.1 (2nd Edition): mask element</a></td> + <td><a href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementHeightAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a href="http://www.w3.org/TR/SVG/struct.html#ImageElementHeightAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a href="http://www.w3.org/TR/SVG/pservers.html#PatternElementHeightAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a href="http://www.w3.org/TR/SVG/shapes.html#RectElementHeightAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a href="http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a href="http://www.w3.org/TR/SVG/struct.html#UseElementHeightAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveHeightAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a href="http://www.w3.org/TR/SVG/masking.html#MaskElementHeightAttribute">SVG 1.1 (2nd Edition): mask element</a></td> </tr> </tbody> </table> @@ -46,20 +46,20 @@ translation_of: Web/SVG/Attribute/height <h2 id="Exemple">Exemple</h2> -<pre class="brush: xml line-numbers language-xml"><code class="language-xml"><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="punctuation token">></span></span> +<pre class="brush: xml"><?xml version="1.0"?> +<svg width="120" height="120" + viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<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>10<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<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>100<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>svg</span><span class="punctuation token">></span></span></code></pre> + <rect x="10" y="10" width="100" height="100"/> +</svg></pre> <h2 id="Eléments">Eléments</h2> <p>Les éléments suivants peuvent utiliser l'attribut <code>height</code> :</p> <ul> - <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> + <li><a href="/fr/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> <li>{{ SVGElement("filter") }}</li> <li>{{ SVGElement("foreignObject") }}</li> <li>{{ SVGElement("image") }}</li> diff --git a/files/fr/web/svg/attribute/in/index.html b/files/fr/web/svg/attribute/in/index.html index 19673d8804..3c4eb4f139 100644 --- a/files/fr/web/svg/attribute/in/index.html +++ b/files/fr/web/svg/attribute/in/index.html @@ -7,7 +7,7 @@ tags: - SVG Filter translation_of: Web/SVG/Attribute/in --- -<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>« <a href="/fr/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> <p>L'attribut <code>in</code> identifie l'entrée pour la primitive de filtre donnée.</p> @@ -33,7 +33,7 @@ translation_of: Web/SVG/Attribute/in </tr> <tr> <th scope="row">Document normatif</th> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute">SVG 1.1 (2nd Edition)</a></td> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> </table> @@ -65,7 +65,7 @@ translation_of: Web/SVG/Attribute/in <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/> </filter> </defs> - <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <image xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" /> </svg> @@ -73,7 +73,7 @@ translation_of: Web/SVG/Attribute/in <defs> <filter id="imageMultiply"> <!-- Solution de contournement. --> - <feImage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <feImage xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <feBlend in2="SourceGraphic" mode="multiply"/> </filter> </defs> @@ -83,7 +83,7 @@ translation_of: Web/SVG/Attribute/in <p>{{ EmbedLiveSample('Contournement_pour_BackgroundImage') }}</p> -<h2 id="Workaround_for_BackgroundImage" name="Workaround_for_BackgroundImage">Éléments</h2> +<h2>Éléments</h2> <p>Les éléments suivants peuvent utiliser l'attribut <code>in</code>:</p> diff --git a/files/fr/web/svg/attribute/index.html b/files/fr/web/svg/attribute/index.html index 87b1834e9c..aa176af715 100644 --- a/files/fr/web/svg/attribute/index.html +++ b/files/fr/web/svg/attribute/index.html @@ -12,11 +12,13 @@ translation_of: Web/SVG/Attribute --- <div>{{SVGRef}}</div> -<p class="summary"><span class="seoSummary">Les éléments SVG peuvent être modifiés en utilisant des attributs qui spécifient comment les éléments doivent être traités ou présentés.</span> Ci-dessous, la liste de tous les attributs disponibles en SVG ainsi que des liens vers leur documentation pour vous aider à apprendre sur quels éléments ils s'appliquent et comment ils fonctionnent.</p> +<p>Les éléments SVG peuvent être modifiés en utilisant des attributs qui spécifient comment les éléments doivent être traités ou présentés.</p> + +<p>Ci-dessous, la liste de tous les attributs disponibles en SVG ainsi que des liens vers leur documentation pour vous aider à apprendre sur quels éléments ils s'appliquent et comment ils fonctionnent.</p> <h2 id="Attributs_SVG_de_A_à_Z">Attributs SVG de A à Z</h2> -<div class="index"> + <h3 id="A">A</h3> <ul> @@ -394,7 +396,7 @@ translation_of: Web/SVG/Attribute <li>{{SVGAttr("z")}}</li> <li>{{SVGAttr("zoomAndPan")}}</li> </ul> -</div> + <h2 id="Attributs_SVG_par_catégorie">Attributs SVG par catégorie</h2> @@ -418,7 +420,9 @@ translation_of: Web/SVG/Attribute <h3 id="Attributs_de_présentation"><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></h3> -<div class="note">Notez que tous les attributs SVG de présentation peuvent être utilisés comme propriété CSS.</div> +<div class="note"> + <p><strong>Note :</strong> Tous les attributs SVG de présentation peuvent être utilisés comme propriété CSS.</p> +</div> <p>{{SVGAttr("alignment-baseline")}}, {{SVGAttr("baseline-shift")}}, {{SVGAttr("clip")}}, {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}, {{SVGAttr("color")}}, {{SVGAttr("color-interpolation")}}, {{SVGAttr("color-interpolation-filters")}}, {{SVGAttr("color-profile")}}, {{SVGAttr("color-rendering")}}, {{SVGAttr("cursor")}}, {{SVGAttr("direction")}}, {{SVGAttr("display")}}, {{SVGAttr("dominant-baseline")}}, {{SVGAttr("enable-background")}}, {{SVGAttr("fill")}}, {{SVGAttr("fill-opacity")}}, {{SVGAttr("fill-rule")}}, {{SVGAttr("filter")}}, {{SVGAttr("flood-color")}}, {{SVGAttr("flood-opacity")}}, {{SVGAttr("font-family")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("glyph-orientation-horizontal")}}, {{SVGAttr("glyph-orientation-vertical")}}, {{SVGAttr("image-rendering")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("lighting-color")}}, {{SVGAttr("marker-end")}}, {{SVGAttr("marker-mid")}}, {{SVGAttr("marker-start")}}, {{SVGAttr("mask")}}, {{SVGAttr("opacity")}}, {{SVGAttr("overflow")}}, {{SVGAttr("pointer-events")}}, {{SVGAttr("shape-rendering")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("stop-opacity")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stroke-dasharray")}}, {{SVGAttr("stroke-dashoffset")}}, {{SVGAttr("stroke-linecap")}}, {{SVGAttr("stroke-linejoin")}}, {{SVGAttr("stroke-miterlimit")}}, {{SVGAttr("stroke-opacity")}}, {{SVGAttr("stroke-width")}}, {{SVGAttr("text-anchor")}}, {{SVGAttr("transform")}}, {{SVGAttr("text-decoration")}}, {{SVGAttr("text-rendering")}}, {{SVGAttr("unicode-bidi")}}, {{SVGAttr("vector-effect")}}, {{SVGAttr("visibility")}}, {{SVGAttr("word-spacing")}}, {{SVGAttr("writing-mode")}}</p> diff --git a/files/fr/web/svg/attribute/mask/index.html b/files/fr/web/svg/attribute/mask/index.html index a3145cc508..c7059b649f 100644 --- a/files/fr/web/svg/attribute/mask/index.html +++ b/files/fr/web/svg/attribute/mask/index.html @@ -7,13 +7,14 @@ translation_of: Web/SVG/Attribute/mask <p>L'attribut <code>mask</code> est un attribut de présentation principalement utilisé pour appliquer un trou (défini par un élément {{ SVGElement("mask") }}) sur l'élément qui possède cet attribut.</p> -<p class="note"><strong>Note:</strong> On peut aussi utiliser l'attribut {{cssxref('mask')}} en CSS.</p> - -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> +<div class="note"> + <p><strong>Note :</strong> On peut aussi utiliser l'attribut {{cssxref('mask')}} en CSS.</p> </div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> + <pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <mask id="monMask" maskContentUnits="objectBoundingBox"> <rect fill="white" x="0" y="0" width="100%" height="100%" /> @@ -27,8 +28,7 @@ translation_of: Web/SVG/Attribute/mask mask="url(#monMask)"/> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p> <p>Depuis SVG2, l'attribut {{cssxref('mask')}} est défini comme une propriété CSS et comme une propriété raccourcie pour beaucoup d'autres propriétés: {{cssxref('mask-image')}}, {{cssxref('mask-mode')}}, {{cssxref('mask-repeat')}}, {{cssxref('mask-position')}}, {{cssxref('mask-clip')}}, {{cssxref('mask-origin')}}, {{cssxref('mask-size')}} et {{cssxref('mask-composite')}}.</p> @@ -53,9 +53,7 @@ translation_of: Web/SVG/Attribute/mask </tbody> </table> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> - - +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.mask")}}</p> diff --git a/files/fr/web/svg/attribute/points/index.html b/files/fr/web/svg/attribute/points/index.html index 7c78fd2030..1ca4f41fc7 100644 --- a/files/fr/web/svg/attribute/points/index.html +++ b/files/fr/web/svg/attribute/points/index.html @@ -9,10 +9,9 @@ translation_of: Web/SVG/Attribute/points <p>Les éléments {{SVGElement("polyline")}} et {{SVGElement("polygon")}} utilisent cet attribut.</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline est une forme ouverte --> @@ -30,14 +29,15 @@ translation_of: Web/SVG/Attribute/points --> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="polyline">polyline</h2> <p>Pour un élément {{SVGElement('polyline')}}, <code>points</code> défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.</p> -<p class="note"><strong>Remarque:</strong> Un polygone est une forme ouverte, ce qui implique que le dernier point n'est pas connecté au premier point.</p> +<div class="note"> + <p><strong>Note :</strong> Un polygone est une forme ouverte, ce qui implique que le dernier point n'est pas connecté au premier point.</p> +</div> <table class="properties"> <tbody> @@ -58,9 +58,7 @@ translation_of: Web/SVG/Attribute/points <h3 id="Exemple">Exemple</h3> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline est une forme ouverte --> @@ -74,7 +72,9 @@ translation_of: Web/SVG/Attribute/points <p>Pour un élément {{SVGElement('polyline')}}, <code>points</code> défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.</p> -<p class="note"><strong>Remarque:</strong> Un polygone est une forme fermée, ce qui implique que le dernier point est connecté au premier.</p> +<div class="note"> + <p><strong>Note :</strong> Un polygone est une forme fermée, ce qui implique que le dernier point est connecté au premier.</p> +</div> <table class="properties"> <tbody> @@ -95,9 +95,7 @@ translation_of: Web/SVG/Attribute/points <h3 id="Example">Example</h3> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polygon est une forme fermée --> diff --git a/files/fr/web/svg/attribute/presentation/index.html b/files/fr/web/svg/attribute/presentation/index.html index d1c646c803..bf0a47bbee 100644 --- a/files/fr/web/svg/attribute/presentation/index.html +++ b/files/fr/web/svg/attribute/presentation/index.html @@ -7,266 +7,262 @@ translation_of: Web/SVG/Attribute/Presentation <p>Les <em>attributs SVG de présentation</em> sont des propriétés CSS pouvant être utilisées comme attributs sur les éléments SVG</p> -<div class="index"> <ul> - <li><a href="#attr-alignment-baseline">alignment-baseline</a></li> - <li><a href="#attr-baseline-shift">baseline-shift</a></li> - <li><a href="#attr-clip">clip</a></li> - <li><a href="#attr-clip-path">clip-path</a></li> - <li><a href="#attr-clip-rule">clip-rule</a></li> - <li><a href="#attr-color">color</a></li> - <li><a href="#attr-color-interpolation">color-interpolation</a></li> - <li><a href="#attr-color-interpolation-filters">color-interpolation-filters</a></li> - <li><a href="#attr-color-profile">color-profile</a></li> - <li><a href="#attr-color-rendering">color-rendering</a></li> - <li><a href="#attr-cursor">cursor</a></li> - <li><a href="#attr-direction">direction</a></li> - <li><a href="#attr-display">display</a></li> - <li><a href="#attr-dominant-baseline">dominant-baseline</a></li> - <li><a href="#attr-enable-background">enable-background</a></li> - <li><a href="#attr-fill">fill</a></li> - <li><a href="#attr-fill-opacity">fill-opacity</a></li> - <li><a href="#attr-fill-rule">fill-rule</a></li> - <li><a href="#attr-filter">filter</a></li> - <li><a href="#attr-flood-color">flood-color</a></li> - <li><a href="#attr-flood-opacity">flood-opacity</a></li> - <li><a href="#attr-font-family">font-family</a></li> - <li><a href="#attr-font-size">font-size</a></li> - <li><a href="#attr-font-size-adjust">font-size-adjust</a></li> - <li><a href="#attr-font-stretch">font-stretch</a></li> - <li><a href="#attr-font-style">font-style</a></li> - <li><a href="#attr-font-variant">font-variant</a></li> - <li><a href="#attr-font-weight">font-weight</a></li> - <li><a href="#attr-glyph-orientation-horizontal">glyph-orientation-horizontal</a></li> - <li><a href="#attr-glyph-orientation-vertical">glyph-orientation-vertical</a></li> - <li><a href="#attr-image-rendering">image-rendering</a></li> - <li><a href="#attr-kerning">kerning</a></li> - <li><a href="#attr-letter-spacing">letter-spacing</a></li> - <li><a href="#attr-lighting-color">lighting-color</a></li> - <li><a href="#attr-marker-end">marker-end</a></li> - <li><a href="#attr-marker-mid">marker-mid</a></li> - <li><a href="#attr-marker-start">marker-start</a></li> - <li><a href="#attr-mask">mask</a></li> - <li><a href="#attr-opacity">opacity</a></li> - <li><a href="#attr-overflow">overflow</a></li> - <li><a href="#attr-pointer-events">pointer-events</a></li> - <li><a href="#attr-shape-rendering">shape-rendering</a></li> - <li><a href="#attr-solid-color">solid-color</a></li> - <li><a href="#attr-solid-opacity">solid-opacity</a></li> - <li><a href="#attr-stop-color">stop-color</a></li> - <li><a href="#attr-stop-opacity">stop-opacity</a></li> - <li><a href="#attr-stroke">stroke</a></li> - <li><a href="#attr-stroke-dasharray">stroke-dasharray</a></li> - <li><a href="#attr-stroke-dashoffset">stroke-dashoffset</a></li> - <li><a href="#attr-stroke-linecap">stroke-linecap</a></li> - <li><a href="#attr-stroke-linejoin">stroke-linejoin</a></li> - <li><a href="#attr-stroke-miterlimit">stroke-miterlimit</a></li> - <li><a href="#attr-stroke-opacity">stroke-opacity</a></li> - <li><a href="#attr-stroke-width">stroke-width</a></li> - <li><a href="#attr-text-anchor">text-anchor</a></li> - <li><a href="#attr-text-decoration">text-decoration</a></li> - <li><a href="#attr-text-rendering">text-rendering</a></li> - <li><a href="#attr-transform">transform</a></li> - <li><a href="#attr-unicode-bidi">unicode-bidi</a></li> - <li><a href="#attr-vector-effect">vector-effect</a></li> - <li><a href="#attr-visibility">visibility</a></li> - <li><a href="#attr-word-spacing">word-spacing</a></li> - <li><a href="#attr-writing-mode">writing-mode</a></li> + <li>alignment-baseline</li> + <li>baseline-shift</li> + <li>clip</li> + <li>clip-path</li> + <li>clip-rule</li> + <li>color</li> + <li>color-interpolation</li> + <li>color-interpolation-filters</li> + <li>color-profile</li> + <li>color-rendering</li> + <li>cursor</li> + <li>direction</li> + <li>display</li> + <li>dominant-baseline</li> + <li>enable-background</li> + <li>fill</li> + <li>fill-opacity</li> + <li>fill-rule</li> + <li>filter</li> + <li>flood-color</li> + <li>flood-opacity</li> + <li>font-family</li> + <li>font-size</li> + <li>font-size-adjust</li> + <li>font-stretch</li> + <li>font-style</li> + <li>font-variant</li> + <li>font-weight</li> + <li>glyph-orientation-horizontal</li> + <li>glyph-orientation-vertical</li> + <li>image-rendering</li> + <li>kerning</li> + <li>letter-spacing</li> + <li>lighting-color</li> + <li>marker-end</li> + <li>marker-mid</li> + <li>marker-start</li> + <li>mask</li> + <li>opacity</li> + <li>overflow</li> + <li>pointer-events</li> + <li>shape-rendering</li> + <li>solid-color</li> + <li>solid-opacity</li> + <li>stop-color</li> + <li>stop-opacity</li> + <li>stroke</li> + <li>stroke-dasharray</li> + <li>stroke-dashoffset</li> + <li>stroke-linecap</li> + <li>stroke-linejoin</li> + <li>stroke-miterlimit</li> + <li>stroke-opacity</li> + <li>stroke-width</li> + <li>text-anchor</li> + <li>text-decoration</li> + <li>text-rendering</li> + <li>transform</li> + <li>unicode-bidi</li> + <li>vector-effect</li> + <li>visibility</li> + <li>word-spacing</li> + <li>writing-mode</li> </ul> -</div> <h2 id="Attributs">Attributs</h2> -<p> </p> - <dl> - <dt id="attr-alignment-baseline">{{SVGAttr('alignment-baseline')}}</dt> + <dt>{{SVGAttr('alignment-baseline')}}</dt> <dd>Spécifie comment un objet est aligné sur la ligne de pied de la police par rapport à son parent.<br> <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>baseline</code>|<code>before-edge</code>|<code>text-before-edge</code>|<code>middle</code>|<code>central</code>|<code>after-edge</code>|<code>text-after-edge</code>|<code>ideographic</code>|<code>alphabetic</code>|<code>hanging</code>|<code>mathematical</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-baseline-shift">{{SVGAttr('baseline-shift')}}</dt> + <dt>{{SVGAttr('baseline-shift')}}</dt> <dd>Permet de positionner la ligne de pied de l'élément par rapport à celle de son parent.<br> <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>baseline</code>|<code>super</code>|<code>sub</code>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>|<a href="/docs/Web/SVG/Content_type#Length"><length></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-clip">{{SVGAttr('clip')}} {{deprecated_inline('css')}}</dt> + <dt>{{SVGAttr('clip')}} {{deprecated_inline('css')}}</dt> <dd>Définit quelle partie d'un élément est visible.<br> <small><em>Valeur</em>: <strong><code>auto</code></strong>|{{cssxref("shape")}}|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-clip-path">{{SVGAttr('clip-path')}}</dt> + <dt>{{SVGAttr('clip-path')}}</dt> <dd>Associe un chemin de détourage {{SVGElement('clipPath')}} à l'élément.<br> <small><em>Valeur</em>: <strong><code>none</code></strong>|<a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-clip-rule">{{SVGAttr('clip-rule')}}</dt> + <dt>{{SVGAttr('clip-rule')}}</dt> <dd>Indique la règle de remplissage à appliquer sur un élément {{SVGElement('clipPath')}}.<br> <small><em>Valeur</em>: <strong><code>nonezero</code></strong>|<code>evenodd</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-color">{{SVGAttr('color')}}</dt> + <dt>{{SVGAttr('color')}}</dt> <dd>Définit la valeur potentielle (valeur de <code>currentColor</code>) pour les attributs de présentation <code>fill</code>, <code>stroke</code>, <code>stop-color</code>, <code>flood-color</code> et <code>lighting-color</code>.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Color"><color></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-color-interpolation">{{SVGAttr('color-interpolation')}}</dt> + <dt>{{SVGAttr('color-interpolation')}}</dt> <dd>Spécifie l'espace colométrique pour les interpolations de dégradés, les animations couleur et composition alpha.<br> <small><em>Valeur</em>: <code>auto</code>|<strong><code>sRGB</code></strong>|<code>linearRGB</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-color-interpolation-filters">{{SVGAttr('color-interpolation-filters')}}</dt> + <dt>{{SVGAttr('color-interpolation-filters')}}</dt> <dd>Spécifie l'espace colométrique pour les opérations effectuées via des effets de filtre.<br> <small><em>Valeur</em>: <code>auto</code>|<code>sRGB</code>|<strong><code>linearRGB</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-color-profile">{{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}}</dt> + <dt>{{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}}</dt> <dd>Définit le profil de couleur qu'une image bitmap incluse via l'élément {{SVGElement('image')}} doit utiliser.<br> <small><em>Valeur</em>: <code>auto</code>|<code>sRGB</code>|<code>linearRGB</code>|<a href="/docs/Web/SVG/Content_type#Name"><name></a>|<a href="/docs/Web/SVG/Content_type#IRI"><IRI></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-color-rendering">{{SVGAttr('color-rendering')}}</dt> + <dt>{{SVGAttr('color-rendering')}}</dt> <dd>Indique au navigateur comment optimiser ses opérations d'interpolation et de composition des couleurs.<br> <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>optimizeSpeed</code>|<code>optimizeQuality</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-cursor">{{SVGAttr('cursor')}}</dt> + <dt>{{SVGAttr('cursor')}}</dt> <dd>Spécifie le curseur affiché lorsque la souris passe au-desuss de l'élément.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<a href="/docs/Web/CSS/cursor#Values"><keywords></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-direction">{{SVGAttr('direction')}}</dt> + <dt>{{SVGAttr('direction')}}</dt> <dd>Spécifie la direction d'écriture du texte.<br> <small><em>Valeur</em>: <strong><code>ltr</code></strong>|<code>rtl</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-display">{{SVGAttr('display')}}</dt> + <dt>{{SVGAttr('display')}}</dt> <dd>Permet de contrôler le rendu d'éléments graphiques ou conteneurs.<br> <small><em>Valeur</em>: see css {{cssxref('display')}}; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-dominant-baseline">{{SVGAttr('dominant-baseline')}}</dt> + <dt>{{SVGAttr('dominant-baseline')}}</dt> <dd>Définit la ligne de pied utilisée pour aligner le texte.<br> <small><em>Valeur</em>: <code>auto</code>|<code>text-bottom</code>|<code>alphabetic</code>|<code>ideographic</code>|<code>middle</code>|<code>central</code>| <code>mathematical</code>|<code>hanging</code>|<code>text-top</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-enable-background">{{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}}</dt> + <dt>{{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}}</dt> <dd>Indique au navigateur comment gérer l'image d'arrière plan.<br> <small><em>Valeur</em>: <strong><code>accumulate</code></strong>|<code>new</code>|<code>inherit</code>; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt id="attr-fill">{{SVGAttr('fill')}}</dt> + <dt>{{SVGAttr('fill')}}</dt> <dd>Définit la couleur de remplissage d'un élément graphique.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Paint"><paint></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-fill-opacity">{{SVGAttr('fill-opacity')}}</dt> + <dt>{{SVGAttr('fill-opacity')}}</dt> <dd>Définit l'opacité du remplissage de l'élément.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Number"><number></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-fill-rule">{{SVGAttr('fill-rule')}}</dt> + <dt>{{SVGAttr('fill-rule')}}</dt> <dd>Indique comment déterminer quelles parties du chemin se trouvent à l'intérieur de la forme.<br> <small><em>Valeur</em>: <strong><code>nonzero</code></strong>|<code>evenodd</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-filter">{{SVGAttr('filter')}}</dt> + <dt>{{SVGAttr('filter')}}</dt> <dd>Applique un filtre, définit par un élément {{SVGElement('filter')}}, à l'élément.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-flood-color">{{SVGAttr('flood-color')}}</dt> + <dt>{{SVGAttr('flood-color')}}</dt> <dd>Indique quelle couleur utiliser pour remplir la région du filtre, définit par les éléments {{SVGElement('feFlood')}} ou {{SVGElement('feDropShadow')}}.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Color"><color></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-flood-opacity">{{SVGAttr('flood-opacity')}}</dt> + <dt>{{SVGAttr('flood-opacity')}}</dt> <dd>Indique l'opacité à utiliser pour remplir la région du filtre, définit par les éléments {{SVGElement('feFlood')}} ou {{SVGElement('feDropShadow')}}.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Number"><number></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-font-family">{{SVGAttr('font-family')}}</dt> + <dt>{{SVGAttr('font-family')}}</dt> <dd>Indique la police utiliser pour restituer le texte de l'élément.<br> <small><em>Valeur</em>: see css {{cssxref('font-family')}}; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-font-size">{{SVGAttr('font-size')}}</dt> + <dt>{{SVGAttr('font-size')}}</dt> <dd>Spécifie la taille de la police.<br> <small><em>Valeur</em>: see css {{cssxref('font-size')}}; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-font-size-adjust">{{SVGAttr('font-size-adjust')}}</dt> + <dt>{{SVGAttr('font-size-adjust')}}</dt> <dd>Spécifie que la taille de la police doit être choisit en se basant sur la taille des lettres minuscules et non des majuscules.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Number"><number></a>|<code><strong>none</strong></code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-font-stretch">{{SVGAttr('font-stretch')}}</dt> + <dt>{{SVGAttr('font-stretch')}}</dt> <dd>Sélectionne la version normale, condensée ou espacée d'une police.<br> <small><em>Valeur</em>: see css {{cssxref('font-stretch')}}; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-font-style">{{SVGAttr('font-style')}}</dt> + <dt>{{SVGAttr('font-style')}}</dt> <dd>Spécifie si la police doit être stylisée en normal, italique ou oblique.<br> <small><em>Valeur</em>: <strong><code>normal</code></strong>|<code>italic</code>|<code>oblique</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-font-variant">{{SVGAttr('font-variant')}}</dt> + <dt>{{SVGAttr('font-variant')}}</dt> <dd>Spécifie si une police doit utiliser certaines variations, telles que les petites majuscules ou les ligatures.<br> <small><em>Valeur</em>: see css {{cssxref('font-variant')}}; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-font-weight">{{SVGAttr('font-weight')}}</dt> + <dt>{{SVGAttr('font-weight')}}</dt> <dd>Spécifie l'épaisseur (ou graisse) de la police.<br> <small><em>Valeur</em>: <strong><code>normal</code></strong>|<code>bold</code>|<code>lighter</code>|<code>bolder</code>|<code>100</code>|<code>200</code>|<code>300</code>|<code>400</code>|<code>500</code>|<code>600</code>|<code>700</code>|<code>800</code>|<code>900</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-glyph-orientation-horizontal">{{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}}</dt> + <dt>{{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}}</dt> <dd>Contrôle l'orientation des glyphes lorsque la direction en ligne est horizontale.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Angle"><angle></a>|<code>inherit</code>; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt id="attr-glyph-orientation-vertical">{{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}}</dt> + <dt>{{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}}</dt> <dd>Contrôle l'orientation des glyphes lorsque la direction en ligne est verticale.<br> <small><em>Valeur</em>: <strong><code>auto</code></strong>|<a href="/docs/Web/SVG/Content_type#Angle"><angle></a>|<code>inherit</code>; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt id="attr-image-rendering">{{SVGAttr('image-rendering')}}</dt> + <dt>{{SVGAttr('image-rendering')}}</dt> <dd>Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des images.<br> <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>optimizeQuality</code>|<code>optimizeSpeed</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-kerning">{{SVGAttr('kerning')}} {{deprecated_inline('svg2')}}</dt> + <dt>{{SVGAttr('kerning')}} {{deprecated_inline('svg2')}}</dt> <dd>Indique au navigateur s'il doit ajuster l'espacement entre les glyphes.<br> <small><em>Valeur</em>: <strong><code>auto</code></strong>|<a href="/docs/Web/SVG/Content_type#Length"><length></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-letter-spacing">{{SVGAttr('letter-spacing')}}</dt> + <dt>{{SVGAttr('letter-spacing')}}</dt> <dd>Contrôle l'espacement entre les caratères du texte.<br> <small><em>Valeur</em>: <strong><code>normal</code></strong>|<a href="/docs/Web/SVG/Content_type#Length"><length></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-lighting-color">{{SVGAttr('lighting-color')}}</dt> + <dt>{{SVGAttr('lighting-color')}}</dt> <dd>Définit la couleur de la source de lumière pour les filtres {{SVGElement('feDiffuseLighting')}} et {{SVGElement('feSpecularLighting')}}.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Color"><color></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-marker-end">{{SVGAttr('marker-end')}}</dt> + <dt>{{SVGAttr('marker-end')}}</dt> <dd>Définit la pointe de la flèche ou polymarker dessiné à la fin de l'élément {{SVGElement('path')}} ou ou de la forme.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-marker-mid">{{SVGAttr('marker-mid')}}</dt> + <dt>{{SVGAttr('marker-mid')}}</dt> <dd>Définit la pointe de la flèche ou polymarker dessiné entre chaque segment de l'élément {{SVGElement('path')}} ou de la forme.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-marker-start">{{SVGAttr('marker-start')}}</dt> + <dt>{{SVGAttr('marker-start')}}</dt> <dd>Définit la pointe de la flèche ou polymarker dessiné au début de l'élément {{SVGElement('path')}} ou ou de la forme.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-mask">{{SVGAttr('mask')}}</dt> + <dt>{{SVGAttr('mask')}}</dt> <dd>Modifie la visibilité d'un élément en masquant ou détourant l'image à des endroits spécifiques.<br> <small><em>Valeur</em>: see css {{cssxref('mask')}}; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-opacity">{{SVGAttr('opacity')}}</dt> + <dt>{{SVGAttr('opacity')}}</dt> <dd>Spécifie l'opacité d'un objet ou d'un groupe d'objets.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Opacity_value"><opacity-value></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-overflow">{{SVGAttr('overflow')}}</dt> + <dt>{{SVGAttr('overflow')}}</dt> <dd>Spécifie si le contenu d'un élément bloc est tronqué lorsqu'il déborde de la zone de l'élément.<br> <small><em>Valeur</em>: <code><strong>visible</strong></code>|<code>hidden|scroll</code>|<code>auto</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-pointer-events">{{SVGAttr('pointer-events')}}</dt> + <dt>{{SVGAttr('pointer-events')}}</dt> <dd>Définit si et quand un élément peut être la cible d'un événement de la souris.<br> <small><em>Valeur</em>: <code>bounding-box</code>|<code><strong>visiblePainted</strong></code>|<code>visibleFil</code>|<code>visibleStroke</code>|<code>visible</code> |<code>painted</code>|<code>fill</code>|<code>stroke</code>|<code>all</code>|<code>none</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-shape-rendering">{{SVGAttr('shape-rendering')}}</dt> + <dt>{{SVGAttr('shape-rendering')}}</dt> <dd>Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des éléments {{SVGElement('path')}} et des formes.<br> <small><em>Valeur</em>: <code><strong>auto</strong></code>|<code>optimizeSpeed</code>|<code>crispEdges</code>|<code>geometricPrecision</code> |<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-solid-color">{{SVGAttr('solid-color')}}</dt> + <dt>{{SVGAttr('solid-color')}}</dt> <dd>-<br> <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd> - <dt id="attr-solid-opacity">{{SVGAttr('solid-opacity')}}</dt> + <dt>{{SVGAttr('solid-opacity')}}</dt> <dd>-<br> <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd> - <dt id="attr-stop-color">{{SVGAttr('stop-color')}}</dt> + <dt>{{SVGAttr('stop-color')}}</dt> <dd>Indique la couleur à utiliser sur un {{SVGElement('stop')}} d'un dégradé.<br> - <small><em>Valeur</em>: <code>currentColor</code>|<a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a>|<a href="/en/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor"><icccolor></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-stop-opacity">{{SVGAttr('stop-opacity')}}</dt> + <small><em>Valeur</em>: <code>currentColor</code>|<a href="/fr/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a>|<a href="/fr/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor"><icccolor></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> + <dt>{{SVGAttr('stop-opacity')}}</dt> <dd>Indique l'opacité du {{SVGElement('stop')}}.<br> - <small><em>Valeur</em>: <a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value"><opacity-value></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-stroke">{{SVGAttr('stroke')}}</dt> + <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value"><opacity-value></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> + <dt>{{SVGAttr('stroke')}}</dt> <dd>Définit la couleur à utiliser pour le contour de l'élément.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Paint"><paint></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-stroke-dasharray">{{SVGAttr('stroke-dasharray')}}</dt> + <dt>{{SVGAttr('stroke-dasharray')}}</dt> <dd>Définit le motif des pointillés utilisé pour dessiner le contour de la forme.<br> <small><em>Valeur</em>: <code>none</code>|<code><dasharray></code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-stroke-dashoffset">{{SVGAttr('stroke-dashoffset')}}</dt> + <dt>{{SVGAttr('stroke-dashoffset')}}</dt> <dd>Décale la position de départ des pointillés.<br> - <small><em>Valeur</em>: <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a>|<a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-stroke-linecap"><strong>{{SVGAttr('stroke-linecap')}}</strong></dt> + <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a>|<a href="/fr/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><length></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> + <dt><strong>{{SVGAttr('stroke-linecap')}}</strong></dt> <dd>Définit la forme de la fin des lignes.<br> <small><em>Valeur</em>: <code><strong>butt</strong></code>|<code>round</code>|<code>square</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-stroke-linejoin"><strong>{{SVGAttr('stroke-linejoin')}}</strong></dt> + <dt><strong>{{SVGAttr('stroke-linejoin')}}</strong></dt> <dd>Définit la manière de dessiner la liaison entre deux segments de ligne.<br> <small><em>Valeur</em>: <code>arcs</code>|<code>bevel</code>|<code><strong>miter</strong></code>|<code>miter-clip</code>|<code>round</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-stroke-miterlimit"><strong>{{SVGAttr('stroke-miterlimit')}}</strong></dt> + <dt><strong>{{SVGAttr('stroke-miterlimit')}}</strong></dt> <dd>Définit la limite du rapport entre la longueur du coin et la valeur de {{SVGAttr('stroke-width')}} utilisée pour dessiner la liaison entre deux segments de ligne.<br> - <small><em>Valeur</em>: <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-stroke-opacity"><strong>{{SVGAttr('stroke-opacity')}}</strong></dt> + <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> + <dt><strong>{{SVGAttr('stroke-opacity')}}</strong></dt> <dd>Définit l'opacité du contour d'une forme.<br> - <small><em>Valeur</em>: <a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value"><opacity-value></a>|<a href="/docs/Web/SVG/Content_type#Paint"><percentage></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-stroke-width"><strong>{{SVGAttr('stroke-width')}}</strong></dt> + <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value"><opacity-value></a>|<a href="/docs/Web/SVG/Content_type#Paint"><percentage></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> + <dt><strong>{{SVGAttr('stroke-width')}}</strong></dt> <dd>Définit l'épaisseur du contour appliqué à une forme.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><length></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-text-anchor"><strong>{{SVGAttr('text-anchor')}}</strong></dt> + <dt><strong>{{SVGAttr('text-anchor')}}</strong></dt> <dd>Définit l'alignement vertical d'une chaîne de texte.<br> <small><em>Valeur</em>: <code>start</code>|<code>middle</code>|<code>end</code>|<code><strong>inherit</strong></code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-text-decoration"><strong>{{SVGAttr('text-decoration')}}</strong></dt> + <dt><strong>{{SVGAttr('text-decoration')}}</strong></dt> <dd>Définit l'apparence des lignes décoratives sur le texte.<br> <small><em>Valeur</em>: <code>none</code>|<code>underline</code>|<code>overline</code>|<code>line-through</code>|<code>blink</code>|<code><strong>inherit</strong></code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-text-rendering"><strong>{{SVGAttr('text-rendering')}}</strong></dt> + <dt><strong>{{SVGAttr('text-rendering')}}</strong></dt> <dd>Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu du texte.<br> <small><em>Valeur</em>: <code><strong>auto</strong></code>|<code>optimizeSpeed</code>|<code>optimizeLegibility</code>|<code>geometricPrecision</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-transform"><strong>{{SVGAttr('transform')}}</strong></dt> + <dt><strong>{{SVGAttr('transform')}}</strong></dt> <dd>Définit une liste de transformations à appliquer à un élément et à ses enfants.<br> <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Transform-list"><transform-list></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-unicode-bidi"><strong>{{SVGAttr('unicode-bidi')}}</strong></dt> + <dt><strong>{{SVGAttr('unicode-bidi')}}</strong></dt> <dd>-<br> <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd> - <dt id="attr-vector-effect"><strong>{{SVGAttr('vector-effect')}}</strong></dt> + <dt><strong>{{SVGAttr('vector-effect')}}</strong></dt> <dd>Spécifie l'effet vectoriel à utiliser lors du dessin d'un objet.<br> <small><em>Valeur</em>: <code>default</code>|<code>non-scaling-stroke</code>|<code>inherit</code>|<code><uri></code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-visibility"><strong>{{SVGAttr('visibility')}}</strong></dt> + <dt><strong>{{SVGAttr('visibility')}}</strong></dt> <dd>Définit la visibilité d'éléments graphiques.<br> <small><em>Valeur</em>: <strong><code>visible</code></strong>|<code>hidden</code>|<code>collapse</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-word-spacing"><strong>{{SVGAttr('word-spacing')}}</strong></dt> + <dt><strong>{{SVGAttr('word-spacing')}}</strong></dt> <dd>Définit la longueur des espaces entre les mots d'un texte.<br> - <small><em>Valeur</em>: <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>|<code><strong title="this is the default value">inherit</strong></code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-writing-mode"><strong>{{SVGAttr('writing-mode')}}</strong></dt> + <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>|<code><strong title="this is the default value">inherit</strong></code>; <em>Animation</em>: <strong>Oui</strong></small></dd> + <dt><strong>{{SVGAttr('writing-mode')}}</strong></dt> <dd>Spécifie si la direction d'un élément {{SVGElement('text')}} doit être de gauche-à-droite, droite-à-gauche, ou de haut-en-bas.<br> <small><em>Valeur</em>: <strong><code>lr-tb</code></strong>|<code>rl-tb</code>|<code>tb-rl</code>|<code>lr</code>|<code>rl</code>|<code>tb</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> </dl> diff --git a/files/fr/web/svg/attribute/preserveaspectratio/index.html b/files/fr/web/svg/attribute/preserveaspectratio/index.html index 7d5ffb6db1..894241bcf5 100644 --- a/files/fr/web/svg/attribute/preserveaspectratio/index.html +++ b/files/fr/web/svg/attribute/preserveaspectratio/index.html @@ -20,41 +20,6 @@ translation_of: Web/SVG/Attribute/preserveAspectRatio </defs> <!-- (largeur>hauteur) meet --> - <svg preserveAspectRatio="xMidYMid meet" x="0" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMinYMid meet" x="25" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMaxYMid meet" x="50" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> - - <!-- (largeur>hauteur) slice --> - <svg preserveAspectRatio="xMidYMin slice" x="0" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMidYMid slice" x="25" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMidYMax slice" x="50" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> - - <!-- (largeur<hauteur) meet --> - <svg preserveAspectRatio="xMidYMin meet" x="75" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMidYMid meet" x="90" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMidYMax meet" x="105" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> - - <!-- (largeur<hauteur) slice --> - <svg preserveAspectRatio="xMinYMid slice" x="120" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMidYMid slice" x="135" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMaxYMid slice" x="150" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> - - <!-- none --> - <svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 100" width="160" height="60"><use href="#smiley" /></svg> -</svg></pre> - -<div class="hidden"> -<h6 id="topExample">topExample</h6> - -<pre class="brush: css">html,body,svg { height:100% } -</pre> - -<pre class="brush: html"><svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> - <defs> - <path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" /> - </defs> - - <!-- (largeur>hauteur) meet --> <rect x="0" y="0" width="20" height="10"> <title>xMidYMid meet</title> </rect> @@ -164,7 +129,11 @@ translation_of: Web/SVG/Attribute/preserveAspectRatio </svg> </svg></pre> -<pre class="brush: css">path { + +<pre class="brush: css hidden"> +html,body,svg { height:100% } + +path { fill: yellow; stroke: black; stroke-width: 8px; @@ -176,7 +145,6 @@ translation_of: Web/SVG/Attribute/preserveAspectRatio rect:hover, rect:active { outline: 1px solid red; }</pre> -</div> <p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> diff --git a/files/fr/web/svg/attribute/seed/index.html b/files/fr/web/svg/attribute/seed/index.html index e4b985d459..23d668208f 100644 --- a/files/fr/web/svg/attribute/seed/index.html +++ b/files/fr/web/svg/attribute/seed/index.html @@ -22,7 +22,7 @@ translation_of: Web/SVG/Attribute/seed </tr> <tr> <th scope="row">Valeur</th> - <td><a href="/en-US/docs/SVG/Content_type#Number" title="/en-US/docs/SVG/Content_type#Number"><number></a></td> + <td><a href="/fr/docs/SVG/Content_type#Number" title="/en-US/docs/SVG/Content_type#Number"><number></a></td> </tr> <tr> <th scope="row">Animable</th> diff --git a/files/fr/web/svg/attribute/stroke-dasharray/index.html b/files/fr/web/svg/attribute/stroke-dasharray/index.html index 0680b8e9bc..c9cf9f4f60 100644 --- a/files/fr/web/svg/attribute/stroke-dasharray/index.html +++ b/files/fr/web/svg/attribute/stroke-dasharray/index.html @@ -8,15 +8,15 @@ translation_of: Web/SVG/Attribute/stroke-dasharray --- <p>L'attribut <code>stroke-dasharray</code> contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés. </p> -<p class="note"><strong>Note:</strong> Comme il s'agit d'un attribut de présentation, <code>stroke-dasharray </code>peut aussi être utilisé directement dans une feuille de style CSS.</p> +<div class="note"> + <p><strong>Note:</strong> Comme il s'agit d'un attribut de présentation, <code>stroke-dasharray </code>peut aussi être utilisé directement dans une feuille de style CSS.</p> +</div> <p>Les éléments suivants peuvent utiliser l'attribut <code>stroke-dasharray</code>: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> <h2 id="Exemple">Exemple</h2> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 30 10" version="1.1" xmlns="http://www.w3.org/2000/svg"> @@ -40,7 +40,7 @@ translation_of: Web/SVG/Attribute/stroke-dasharray </tr> <tr> <th scope="row">Valeur</th> - <td><strong title="this is the default value">none</strong> | <dasharray> | inherit</td> + <td>none | <dasharray> | inherit</td> </tr> <tr> <th scope="row">Animable</th> @@ -48,17 +48,17 @@ translation_of: Web/SVG/Attribute/stroke-dasharray </tr> <tr> <th scope="row">Document normatif</th> - <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty">SVG 1.1 (2nd Edition)</a></td> + <td><a href="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> </table> <dl> <dt><dasharray></dt> - <dd>Il s'agit d'une liste de mesures <span><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><length></a> et</span> <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, <strong>5,3,2</strong> sera rendu comme <strong>5,3,2,5,3,2</strong>.</dd> + <dd>Il s'agit d'une liste de mesures <a href="/fr/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><length></a> et <a href="/fr/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, <strong>5,3,2</strong> sera rendu comme <strong>5,3,2,5,3,2</strong>.</dd> </dl> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.stroke-dasharray")}}</p> diff --git a/files/fr/web/svg/attribute/stroke-dashoffset/index.html b/files/fr/web/svg/attribute/stroke-dashoffset/index.html index ef1bbc8db7..071512cffe 100644 --- a/files/fr/web/svg/attribute/stroke-dashoffset/index.html +++ b/files/fr/web/svg/attribute/stroke-dashoffset/index.html @@ -10,14 +10,16 @@ translation_of: Web/SVG/Attribute/stroke-dashoffset <p>L'attribut <strong><code>stroke-dashoffset</code></strong> décale la position de départ des pointillés sur les lignes SVG.</p> -<p class="note"><strong>Note:</strong> <code>stroke-dashoffset</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>stroke-dashoffset</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> + <pre class="brush: html"><svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> <!-- Pas de tiret --> @@ -60,8 +62,7 @@ translation_of: Web/SVG/Attribute/stroke-dashoffset </svg> </pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="Notes_d'usage">Notes d'usage</h2> @@ -69,7 +70,7 @@ translation_of: Web/SVG/Attribute/stroke-dashoffset <tbody> <tr> <th scope="row">Valeur</th> - <td><strong><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a></strong> | <strong><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a></strong></td> + <td><strong><a href="/fr/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a></strong> | <strong><a href="/fr/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><length></a></strong></td> </tr> <tr> <th scope="row">Valeur par défaut</th> @@ -82,9 +83,9 @@ translation_of: Web/SVG/Attribute/stroke-dashoffset </tbody> </table> -<p>Le décalage est généralement exprimé en unités résolues par {{SVGAttr('pathLength')}} mais si un <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> est utilisé, alors la valeur est résolue en pourcentage du viewport.</p> +<p>Le décalage est généralement exprimé en unités résolues par {{SVGAttr('pathLength')}} mais si un <a href="/fr/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> est utilisé, alors la valeur est résolue en pourcentage du viewport.</p> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.stroke-dashoffset")}}</p> diff --git a/files/fr/web/svg/attribute/stroke-linecap/index.html b/files/fr/web/svg/attribute/stroke-linecap/index.html index 856c000a03..d8b46b8472 100644 --- a/files/fr/web/svg/attribute/stroke-linecap/index.html +++ b/files/fr/web/svg/attribute/stroke-linecap/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/stroke-linecap <p>L'attribut <strong><code>stroke-linecap</code></strong> définit la forme de la fin des lignes SVG.</p> -<p class="note"><strong>Note:</strong> <code>stroke-linecap</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>stroke-linecap</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> @@ -41,8 +42,7 @@ translation_of: Web/SVG/Attribute/stroke-linecap </svg> </pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="Notes_d'usage">Notes d'usage</h2> @@ -69,9 +69,7 @@ translation_of: Web/SVG/Attribute/stroke-linecap <h4 id="Exemple">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> @@ -103,9 +101,7 @@ translation_of: Web/SVG/Attribute/stroke-linecap <h4 id="Exemple_2">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> @@ -137,9 +133,7 @@ translation_of: Web/SVG/Attribute/stroke-linecap <h4 id="Exemple_3">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> @@ -164,7 +158,7 @@ translation_of: Web/SVG/Attribute/stroke-linecap <p>{{EmbedLiveSample('square', '100%', 200)}}</p> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.stroke-linecap")}}</p> diff --git a/files/fr/web/svg/attribute/stroke-linejoin/index.html b/files/fr/web/svg/attribute/stroke-linejoin/index.html index c6a7cac4cd..019611c57d 100644 --- a/files/fr/web/svg/attribute/stroke-linejoin/index.html +++ b/files/fr/web/svg/attribute/stroke-linejoin/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <p>L'attribut <strong><code>stroke-linejoin</code></strong> définit la manière de dessiner la liaison entre deux segments de ligne.</p> -<div class="blockIndicator note"><strong>Note:</strong> <code>stroke-linejoin</code> étant un attribut de présentation, il peut être utililsé comme propriété CSS.</div> +<div class="note"> + <p><strong>Note :</strong> <code>stroke-linejoin</code> étant un attribut de présentation, il peut être utililsé comme propriété CSS.</p> +</div> <p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> <!-- @@ -75,8 +76,7 @@ translation_of: Web/SVG/Attribute/stroke-linejoin </svg> </pre> -<p>{{EmbedLiveSample('topExample', '100%', 400)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 400)}}</p> <h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> @@ -99,15 +99,15 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <h3 id="arcs">arcs</h3> -<div class="blockIndicator note"><strong>Note:</strong> La valeur <code>arcs</code> a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.</div> +<div class="note"> + <p><strong>Note :</strong> La valeur <code>arcs</code> a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.</p> +</div> <p>La valeur <code>arcs</code> indique qu'un arc est utilisé pour joindre les segments du chemin. L'arc est formé en prolongeant les bords extérieurs du trait au point de liaison, avec la même courbe que ce bord.</p> <h4 id="Exemple">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- Effet de la valeur "arcs" --> @@ -135,9 +135,7 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <h4 id="Exemple_2">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- Effet de la valeur "bevel" --> @@ -163,13 +161,13 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <p>La valeur <code>miter</code> indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent.</p> -<div class="blockIndicator note"><strong>Note:</strong> Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, un coin de type <code>bevel</code> est utilisé à la place.</div> +<div class="note"> + <p><strong>Note :</strong> Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, un coin de type <code>bevel</code> est utilisé à la place.</p> +</div> <h4 id="Exemple_3">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"> <!-- Effet de la valeur "miter" --> @@ -206,7 +204,9 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <h3 id="miter-clip">miter-clip</h3> -<div class="blockIndicator note"><strong>Note:</strong> La valeur <code>miter-clip</code> a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.</div> +<div class="note"> + <p><strong>Note :</strong> La valeur <code>miter-clip</code> a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.</p> +</div> <p>La valeur <code>miter-clip</code> indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent.</p> @@ -214,9 +214,7 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <h4 id="Exemple_4">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"> <!-- Effet de la valeur "miter-clip" --> @@ -257,9 +255,7 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <h4 id="Exemple_5">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- Effet de la valeur "round" --> diff --git a/files/fr/web/svg/attribute/stroke-miterlimit/index.html b/files/fr/web/svg/attribute/stroke-miterlimit/index.html index 76ce54a173..f1dfd341e8 100644 --- a/files/fr/web/svg/attribute/stroke-miterlimit/index.html +++ b/files/fr/web/svg/attribute/stroke-miterlimit/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/stroke-miterlimit <p>L'attribut <strong><code>stroke-miterlimit</code></strong> définit la limite du rapport entre la longueur du coin et la valeur de {{ SVGAttr("stroke-width") }} utilisée pour dessiner la <a href="/fr/docs/Web/SVG/Attribute/stroke-linejoin">liaison entre deux segments de ligne</a>. Quand la limite est dépassée, la liaison passe du type <em>miter</em> (pointu) au type <em>bevel</em> (biseauté).</p> -<p class="note"><strong>Note:</strong> L'attribut <code>stroke-miterlimit</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note:</strong> L'attribut <code>stroke-miterlimit</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <p>Cet attribut peut être appliqué à n'importe quel élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"> <!-- Impact du miterlimit par défaut --> @@ -53,8 +54,7 @@ translation_of: Web/SVG/Attribute/stroke-miterlimit M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" /> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 400)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 400)}}</p> <p>Quand deux segments de ligne se recontrent en angle aigu, et la liaison définit par {{ SVGAttr("stroke-linejoin") }} vaut <code>miter</code>, il est possible que le coin s'étende bien au-delà de l'épaisseur de la ligne du contour. Le ratio <code>stroke-miterlimit</code> est utilisé pour définir une limite à partir de laquelle la liaison est convertie de <em>miter</em> à <em>bevel</em>.</p> @@ -70,7 +70,7 @@ translation_of: Web/SVG/Attribute/stroke-miterlimit <tbody> <tr> <th scope="row">Valeur</th> - <td><strong><a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a></strong></td> + <td><strong><a href="/fr/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a></strong></td> </tr> <tr> <th scope="row">Valeur par défaut</th> @@ -85,7 +85,7 @@ translation_of: Web/SVG/Attribute/stroke-miterlimit <p>La valeur de <code>stroke-miterlimit</code> doit être supérieure ou égale à 1.</p> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.stroke-miterlimit")}}</p> diff --git a/files/fr/web/svg/attribute/stroke-opacity/index.html b/files/fr/web/svg/attribute/stroke-opacity/index.html index 1476dac1b5..c1ba3c17f0 100644 --- a/files/fr/web/svg/attribute/stroke-opacity/index.html +++ b/files/fr/web/svg/attribute/stroke-opacity/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/stroke-opacity <p>L'attribut <strong><code>stroke-opacity</code></strong> définit l'opacité du contour (<em>couleur</em>, <em>dégradé</em>, <em>motif</em>, etc) appliqué à une forme SVG.</p> -<p class="note"><strong>Note:</strong> <code>stroke-opacity</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>stroke-opacity</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"> <!-- Opacité par défaut: 1 --> @@ -36,8 +37,7 @@ translation_of: Web/SVG/Attribute/stroke-opacity style="stroke-opacity: .3;" /> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p> <h2 id="Notes_d'usage">Notes d'usage</h2> @@ -58,7 +58,9 @@ translation_of: Web/SVG/Attribute/stroke-opacity </tbody> </table> -<p class="note"><strong>Note:</strong> SVG2 introduit les valeurs en pourcentage pour <code>stroke-opacity</code>, Cependant, ce n'est pas souvent pris en charge. pour le moment (<em>voir {{anch("Compatibilité des navigateurs")}} ci-dessous</em>), il est par conséquent recommendé d'utiliser les valeurs de l'intervalle <code>[0-1]</code>.</p> +<div class="note"> + <p><strong>Note :</strong> SVG2 introduit les valeurs en pourcentage pour <code>stroke-opacity</code>, Cependant, ce n'est pas souvent pris en charge. pour le moment (<em>voir {{anch("Compatibilité des navigateurs")}} ci-dessous</em>), il est par conséquent recommendé d'utiliser les valeurs de l'intervalle <code>[0-1]</code>.</p> +</div> <p>Il est important de savoir que le contour recouvre partiellement le remplissage d'une forme. Ainsi, un contour avec une opacité différente de 1 affichera partiellement le remplissage du dessous. Pour éviter cet effet, il est possible d'appliquer une opacité globale avec l'attribut {{SVGAttr('opacity')}} ou placer le contour derrière le remplissage avec {{SVGAttr('paint-order')}}.</p> diff --git a/files/fr/web/svg/attribute/stroke-width/index.html b/files/fr/web/svg/attribute/stroke-width/index.html index 5ea9c710b4..db0bb6754d 100644 --- a/files/fr/web/svg/attribute/stroke-width/index.html +++ b/files/fr/web/svg/attribute/stroke-width/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/stroke-width <p>L'attribut <strong><code>stroke-width</code></strong> définit l'épaisseur du contour à appliquer à une forme SVG.</p> -<p class="note"><strong>Note:</strong> <code>stroke-width</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>stroke-width</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- Épaisseur par défaut: 1 --> @@ -32,8 +33,7 @@ translation_of: Web/SVG/Attribute/stroke-width stroke-width="2%" /> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p> <h2 id="Notes_d'usage">Notes d'usage</h2> @@ -54,7 +54,9 @@ translation_of: Web/SVG/Attribute/stroke-width </tbody> </table> -<p class="note"><strong>Note:</strong> SVG2 introduit les valeurs en pourcentage pour <code>stroke-width</code>, Cependant, ce n'est pas souvent pris en charge pour le moment (<em>voir {{anch('Compatibilité des navigateurs')}} ci-dessous</em>). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle <code>[0-1]</code>.</p> +<div class="note"> + <p><strong>Note :</strong> SVG2 introduit les valeurs en pourcentage pour <code>stroke-width</code>, Cependant, ce n'est pas souvent pris en charge pour le moment (<em>voir {{anch('Compatibilité des navigateurs')}} ci-dessous</em>). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle <code>[0-1]</code>.</p> +</div> <p>Une valeur en pourcentage est toujours calculée en tant que pourcentage de la longueur diagonale {{SVGAttr('viewBox')}} normalisée.</p> diff --git a/files/fr/web/svg/attribute/stroke/index.html b/files/fr/web/svg/attribute/stroke/index.html index d9e92d5a03..01e3b44595 100644 --- a/files/fr/web/svg/attribute/stroke/index.html +++ b/files/fr/web/svg/attribute/stroke/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/stroke <p>L'attribut <strong><code>stroke</code></strong> définit la couleur (ou n'importe quelle méthode de remplissage, comme un gradient ou motif) a utiliser pour dessiner le contour d'une forme SVG.</p> -<p class="note"><strong>Note:</strong> <code>stroke</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<div class="note"> + <p><strong>Note :</strong> <code>stroke</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> <p>Cet attribut peut être appliqué à tout élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> @@ -37,8 +38,7 @@ translation_of: Web/SVG/Attribute/stroke </svg> </pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="Notes_d'usage">Notes d'usage</h2> @@ -74,7 +74,7 @@ translation_of: Web/SVG/Attribute/stroke <td>{{SpecName("SVG2", "painting.html#StrokeProperty", "stroke")}}</td> <td>{{Spec2("SVG2")}}</td> <td>Définition pour les formes et le texte.<br> - Ajoute <code style="white-space: nowrap;">context-fill</code> et <code style="white-space: nowrap;">context-stroke</code>.</td> + Ajoute <code>context-fill</code> et <code>context-stroke</code>.</td> </tr> <tr> <td>{{SpecName("SVG1.1", "painting.html#StrokeProperty", "stroke")}}</td> @@ -84,8 +84,10 @@ translation_of: Web/SVG/Attribute/stroke </tbody> </table> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.stroke")}}</p> -<p class="note"><strong>Note:</strong> Pour plus d'informations sur les valeurs de <code style="white-space: nowrap;">context-stroke</code> (et <code style="white-space: nowrap;">context-fill</code>) à partir de documents HTML, voir la documentation pour la propriété non-standard <span style="white-space: nowrap;">{{cssxref("-moz-context-properties")}}</span>.</p> +<div class="note"> + <p><strong>Note :</strong> Pour plus d'informations sur les valeurs de <code>context-stroke</code> (et <code>context-fill</code>) à partir de documents HTML, voir la documentation pour la propriété non-standard {{cssxref("-moz-context-properties")}}.</p> +</div> diff --git a/files/fr/web/svg/attribute/style/index.html b/files/fr/web/svg/attribute/style/index.html index ea98e02782..658ac2d4a0 100644 --- a/files/fr/web/svg/attribute/style/index.html +++ b/files/fr/web/svg/attribute/style/index.html @@ -9,7 +9,7 @@ translation_of: Web/SVG/Attribute/style --- <p>{{SVGRef}}</p> -<p><span class="seoSummary">L'attribut <strong><code>style</code></strong> définit les <a href="/fr/docs/Web/CSS">informations de style</a> pour son élément. Il fonctionne de manière identique à <a href="/fr/docs/Web/HTML/Attributs_universels/style">l'attribut <code>style</code> en HTML</a>.</span></p> +<p>L'attribut <strong><code>style</code></strong> définit les <a href="/fr/docs/Web/CSS">informations de style</a> pour son élément. Il fonctionne de manière identique à <a href="/fr/docs/Web/HTML/Attributs_universels/style">l'attribut <code>style</code> en HTML</a>.</p> <h2 id="Context_d'utilisation">Context d'utilisation</h2> @@ -29,16 +29,17 @@ translation_of: Web/SVG/Attribute/style </tr> <tr> <th scope="row">Document normatif</th> - <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute">SVG 1.1 (2ème Edition)</a></td> + <td><a href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute">SVG 1.1 (2ème Edition)</a></td> </tr> </tbody> </table> <dl> <dt><style></dt> - <dd>La syntaxe des données de style dépend du langage de la feuille de style. Par défaut, le langage est <a href="/fr/docs/Web/CSS">CSS</a>.</dd> - <dd> - <p class="note"><strong>Note:</strong> En théorie, l'attribut {{SVGAttr("contentStyleType")}} pourrait être utilisé pour spécifier un language de style autre que CSS, comme <a href="/fr/docs/Web/XSLT">XSL(T)</a>. Cependant, cela n'a jamais été implémenté de manière satisfaisante dans les navigateurs, donc ne vous y fiez pas.</p> + <dd><p>La syntaxe des données de style dépend du langage de la feuille de style. Par défaut, le langage est <a href="/fr/docs/Web/CSS">CSS</a>.</p> + <div class="note"> + <p><strong>Note :</strong> En théorie, l'attribut {{SVGAttr("contentStyleType")}} pourrait être utilisé pour spécifier un language de style autre que CSS, comme <a href="/fr/docs/Web/XSLT">XSL(T)</a>. Cependant, cela n'a jamais été implémenté de manière satisfaisante dans les navigateurs, donc ne vous y fiez pas.</p> + </div> </dd> </dl> diff --git a/files/fr/web/svg/attribute/styling/index.html b/files/fr/web/svg/attribute/styling/index.html index 488332eb22..60021207eb 100644 --- a/files/fr/web/svg/attribute/styling/index.html +++ b/files/fr/web/svg/attribute/styling/index.html @@ -5,20 +5,18 @@ translation_of: Web/SVG/Attribute/Styling --- <p>Les <em>attributs SVG de style</em> sont tous les attributs qui peuvent être spécifiés sur tout élément SVG pour appliquer des styles CSS.</p> -<div class="index"> <ul> - <li><a href="#attr-class"><code>class</code></a></li> - <li><a href="#attr-style"><code>style</code></a></li> + <li><code>class</code></li> + <li><code>style</code></li> </ul> -</div> <h2 id="Attributs">Attributs</h2> <dl> - <dt id="attr-class">{{SVGAttr('class')}}</dt> + <dt>{{SVGAttr('class')}}</dt> <dd>Assigne un nom de classe ou un ensemble de noms de classe à un élément. Il fonctionne de manière identique à l'attribut {{htmlattrxref('class')}} en HTML.<br> <small><em>Valeur</em>: Tout ID valide; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-style">{{SVGAttr('style')}}</dt> + <dt>{{SVGAttr('style')}}</dt> <dd>Spécifie les informations de style d'un élément. Il fonctionne de manière identique à l'attribut {{htmlattrxref('style')}} en HTML.<br> <small><em>Valeur</em>: Toute chaîne de caractères valide; <em>Animation</em>: <strong>Non</strong></small> <p> </p> diff --git a/files/fr/web/svg/attribute/text-anchor/index.html b/files/fr/web/svg/attribute/text-anchor/index.html index 8f094d8e97..449c87238f 100644 --- a/files/fr/web/svg/attribute/text-anchor/index.html +++ b/files/fr/web/svg/attribute/text-anchor/index.html @@ -13,9 +13,8 @@ browser-compat: svg.attributes.presentation.text-anchor <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> -<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 class="note"> + <p><strong>Note :</strong> En tant qu'attribut de présentation, <code>text-anchor</code> peut être utilisé comme une propriété CSS.</p> </div> <p>Cet attribut peut être utilisé pour les éléments SVG suivants :</p> @@ -28,12 +27,12 @@ browser-compat: svg.attributes.presentation.text-anchor <li><a href="/fr/docs/Web/SVG/Element/tspan"><code><tspan></code></a></li> </ul> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html, body, svg { +<h2>Exemple</h2> + +<pre class="brush: css hidden">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 --> @@ -56,8 +55,7 @@ browser-compat: svg.attributes.presentation.text-anchor ]]></style> </svg></pre> -<p>{{EmbedLiveSample("topExample", "120", "120")}}</p> -</div> +<p>{{EmbedLiveSample("exemple", "120", "120")}}</p> <h2 id="usage_notes">Notes d'utilisation</h2> diff --git a/files/fr/web/svg/attribute/transform/index.html b/files/fr/web/svg/attribute/transform/index.html index e8b3843ed2..9ed4c9cc25 100644 --- a/files/fr/web/svg/attribute/transform/index.html +++ b/files/fr/web/svg/attribute/transform/index.html @@ -10,10 +10,9 @@ translation_of: Web/SVG/Attribute/transform <p>L'attribut <strong><code>transform</code></strong> définit une liste de définitions de transformation qui sont appliquées à l'élément ainsi qu'à ses éléments fils.</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" @@ -28,10 +27,11 @@ translation_of: Web/SVG/Attribute/transform </svg> </pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> -<p class="note"><strong>Note :</strong> Pour SVG2, <code>transform</code> est un attribut de présentation et peut donc être utilisé comme une propriété CSS. Attention toutefois aux différences de syntaxe entre la propriété CSS et cet attribut. Voir la documentation de la propriété {{cssxref('transform')}} pour la syntaxe .</p> +<div class="note"> + <p><strong>Note :</strong> Pour SVG2, <code>transform</code> est un attribut de présentation et peut donc être utilisé comme une propriété CSS. Attention toutefois aux différences de syntaxe entre la propriété CSS et cet attribut. Voir la documentation de la propriété {{cssxref('transform')}} pour la syntaxe .</p> +</div> <p>En tant qu'attribut de présentation, <strong><code>transform</code></strong> peut être utilisé par n'importe quel élément (en SVG 1.1, seuls les 16 éléments suivants pouvaient l'utiliser : {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}} et {{SVGElement('use')}}).</p> @@ -58,7 +58,9 @@ translation_of: Web/SVG/Attribute/transform <p>Les fonctions de transformation suivantes peuvent être utilisées par l'attribut <code>transform</code>.</p> -<p class="warning"><strong>Attention !</strong> Selon la spécification, on devrait également pouvoit utiliser les fonctions CSS {{cssxref('transform-function', 'transform functions')}} mais la compatibilité n'est pas assurée.</p> +<div class="warning"> + <p><strong>Attention :</strong> Selon la spécification, on devrait également pouvoit utiliser les fonctions CSS {{cssxref('transform-function', 'transform functions')}} mais la compatibilité n'est pas assurée.</p> +</div> <h3 id="matrix"><code>matrix()</code></h3> @@ -66,10 +68,8 @@ translation_of: Web/SVG/Attribute/transform <h4 id="Exemples">Exemples</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% } +<pre class="brush: css hidden">html,body,svg { height:100% } </pre> -</div> <pre class="brush: html"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="20" fill="green" /> @@ -110,10 +110,8 @@ translation_of: Web/SVG/Attribute/transform <h4 id="Exemples_2">Exemples</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% } +<pre class="brush: css hidden">html,body,svg { height:100% } </pre> -</div> <pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- Pas de translation --> @@ -140,10 +138,8 @@ translation_of: Web/SVG/Attribute/transform <h4 id="Exemples_3">Exemples</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% } +<pre class="brush: css hidden">html,body,svg { height:100% } </pre> -</div> <pre class="brush: html"><svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- uniform scale --> @@ -170,10 +166,8 @@ translation_of: Web/SVG/Attribute/transform <h4 id="Exemples_4">Exemples</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% } +<pre class="brush: css hidden">html,body,svg { height:100% } </pre> -</div> <pre class="brush: html"><svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="10" height="10" /> @@ -195,10 +189,8 @@ translation_of: Web/SVG/Attribute/transform <h4 id="Exemples_5">Exemples</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% } +<pre class="brush: css hidden">html,body,svg { height:100% } </pre> -</div> <pre class="brush: html"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <rect x="-3" y="-3" width="6" height="6" /> @@ -215,10 +207,8 @@ translation_of: Web/SVG/Attribute/transform <h4 id="Exemples_6">Exemples</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% } +<pre class="brush: css hidden">html,body,svg { height:100% } </pre> -</div> <pre class="brush: html"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <rect x="-3" y="-3" width="6" height="6" /> diff --git a/files/fr/web/svg/attribute/viewbox/index.html b/files/fr/web/svg/attribute/viewbox/index.html index c180c650ce..d8133f9c84 100644 --- a/files/fr/web/svg/attribute/viewbox/index.html +++ b/files/fr/web/svg/attribute/viewbox/index.html @@ -32,7 +32,7 @@ translation_of: Web/SVG/Attribute/viewBox </tr> <tr> <th scope="row">Document de norme</th> - <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute">SVG 1.1 (2nd Edition)</a></td> + <td><a href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> </table> diff --git a/files/fr/web/svg/attribute/width/index.html b/files/fr/web/svg/attribute/width/index.html index 6ac999e8fe..bc98142691 100644 --- a/files/fr/web/svg/attribute/width/index.html +++ b/files/fr/web/svg/attribute/width/index.html @@ -3,7 +3,7 @@ title: Width slug: Web/SVG/Attribute/width translation_of: Web/SVG/Attribute/width --- -<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>« <a href="/fr/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> <p>Cet attribut indique une dimension horizontale <code><length></code> dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la largeur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).</p> @@ -19,7 +19,7 @@ translation_of: Web/SVG/Attribute/width </tr> <tr> <th scope="row">Valeur</th> - <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></td> + <td><a href="/fr/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></td> </tr> <tr> <th scope="row">Animable</th> @@ -27,14 +27,14 @@ translation_of: Web/SVG/Attribute/width </tr> <tr> <th scope="row">Document normatif</th> - <td><a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute">SVG 1.1 (2nd Edition): image element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute">SVG 1.1 (2nd Edition): rect element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute">SVG 1.1 (2nd Edition): svg element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute">SVG 1.1 (2nd Edition): use element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute">SVG 1.1 (2nd Edition): mask element</a></td> + <td><a href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a href="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a href="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a href="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a href="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a href="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a href="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute">SVG 1.1 (2nd Edition): mask element</a></td> </tr> </tbody> </table> @@ -43,20 +43,20 @@ translation_of: Web/SVG/Attribute/width <h2 id="Exemple">Exemple</h2> -<pre class="brush: xml line-numbers language-xml"><code class="language-xml"><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="punctuation token">></span></span> +<pre class="brush: xml"><?xml version="1.0"?> +<svg width="120" height="120" + viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<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>10<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<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>100<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>svg</span><span class="punctuation token">></span></span></code></pre> + <rect x="10" y="10" width="100" height="100"/> +</svg></pre> <h2 id="Eléments">Eléments</h2> <p>Les éléments suivants peuvent utiliser l'attribut <code>width</code> :</p> <ul> - <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> + <li><a href="/fr/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> <li>{{ SVGElement("filter") }}</li> <li>{{ SVGElement("foreignObject") }}</li> <li>{{ SVGElement("image") }}</li> diff --git a/files/fr/web/svg/attribute/x/index.html b/files/fr/web/svg/attribute/x/index.html index 86786e50e3..b34d43d08c 100644 --- a/files/fr/web/svg/attribute/x/index.html +++ b/files/fr/web/svg/attribute/x/index.html @@ -32,22 +32,22 @@ translation_of: Web/SVG/Attribute/x </tr> <tr> <th scope="row">Spécifications</th> - <td><a class="external" href="https://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute">SVG 1.1 (seconde édition) : élément <code>altGlyph</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute">SVG 1.1 (seconde édition) : élément <code>cursor</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute">SVG 1.1 (seconde édition) : élément <code>fePointLight</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute">SVG 1.1 (seconde édition) : élément <code>feSpotLight</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute">SVG 1.1 (seconde édition) : élément <code>filter</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute">SVG 1.1 (seconde édition) : élément <code>foreignObject</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute">SVG 1.1 (seconde édition) : élément <code>glyphRef</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute">SVG 1.1 (seconde édition) : élément <code>image</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute">SVG 1.1 (seconde édition) : élément <code>pattern</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute">SVG 1.1 (seconde édition) : élément <code>rect</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute">SVG 1.1 (seconde édition) : élément <code>svg</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/text.html#TextElementXAttribute">SVG 1.1 (seconde édition) : élément <code>text</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/struct.html#UseElementXAttribute">SVG 1.1 (seconde édition) : élément <code>use</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute">SVG 1.1 (seconde édition) : primitive de filtre</a><br> - <a class="external" href="https://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute">SVG 1.1 (seconde édition) : élément <code>mask</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute">SVG 1.1 (seconde édition) : élément <code>tspan</code></a></td> + <td><a href="https://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute">SVG 1.1 (seconde édition) : élément <code>altGlyph</code></a><br> + <a href="https://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute">SVG 1.1 (seconde édition) : élément <code>cursor</code></a><br> + <a href="https://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute">SVG 1.1 (seconde édition) : élément <code>fePointLight</code></a><br> + <a href="https://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute">SVG 1.1 (seconde édition) : élément <code>feSpotLight</code></a><br> + <a href="https://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute">SVG 1.1 (seconde édition) : élément <code>filter</code></a><br> + <a href="https://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute">SVG 1.1 (seconde édition) : élément <code>foreignObject</code></a><br> + <a href="https://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute">SVG 1.1 (seconde édition) : élément <code>glyphRef</code></a><br> + <a href="https://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute">SVG 1.1 (seconde édition) : élément <code>image</code></a><br> + <a href="https://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute">SVG 1.1 (seconde édition) : élément <code>pattern</code></a><br> + <a href="https://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute">SVG 1.1 (seconde édition) : élément <code>rect</code></a><br> + <a href="https://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute">SVG 1.1 (seconde édition) : élément <code>svg</code></a><br> + <a href="https://www.w3.org/TR/SVG/text.html#TextElementXAttribute">SVG 1.1 (seconde édition) : élément <code>text</code></a><br> + <a href="https://www.w3.org/TR/SVG/struct.html#UseElementXAttribute">SVG 1.1 (seconde édition) : élément <code>use</code></a><br> + <a href="https://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute">SVG 1.1 (seconde édition) : primitive de filtre</a><br> + <a href="https://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute">SVG 1.1 (seconde édition) : élément <code>mask</code></a><br> + <a href="https://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute">SVG 1.1 (seconde édition) : élément <code>tspan</code></a></td> </tr> </tbody> </table> |