diff options
Diffstat (limited to 'files/fr/web/svg/attribute')
24 files changed, 315 insertions, 315 deletions
diff --git a/files/fr/web/svg/attribute/clip-path/index.md b/files/fr/web/svg/attribute/clip-path/index.md index 2fb54eb510..18cac09939 100644 --- a/files/fr/web/svg/attribute/clip-path/index.md +++ b/files/fr/web/svg/attribute/clip-path/index.md @@ -71,7 +71,7 @@ html,body,svg { height:100% } </table> - \<geometry-box> - - : une information supplémentaire pour dire comment une {{cssxref('basic-shape', 'forme CSS')}} est appliquée à un élément: `fill-box` indique d'utiliser la zone de sélection de l'objet ; `stroke-box` d'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément; `view-box` d'utiliser le document SVG parent. + - : une information supplémentaire pour dire comment une {{cssxref('basic-shape', 'forme CSS')}} est appliquée à un élément: `fill-box` indique d'utiliser la zone de sélection de l'objet ; `stroke-box` d'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément; `view-box` d'utiliser le document SVG parent. > **Note :** Pour plus d'informations sur la syntaxe de clip-path, voir la propriété CSS {{cssxref('clip-path')}}. diff --git a/files/fr/web/svg/attribute/color/index.md b/files/fr/web/svg/attribute/color/index.md index 1dc36653d5..2a7c8a69af 100644 --- a/files/fr/web/svg/attribute/color/index.md +++ b/files/fr/web/svg/attribute/color/index.md @@ -62,7 +62,7 @@ L'attribut `color` est utilisé pour définir indirectement une valeur potentiel Les éléments suivants peuvent utiliser l'attribut `color`: - [Éléments de contenu textuel](/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel "en/SVG/Element#Text_content_elements") » -- [Éléments de formes](/fr/docs/Web/SVG/Element#Éléments_de_formes "en/SVG/Element#Shape_elements") » +- [Éléments de formes](/fr/docs/Web/SVG/Element#Éléments_de_formes "en/SVG/Element#Shape_elements") » - {{ SVGElement("stop") }} - {{ SVGElement("feFlood") }} - {{ SVGElement("feDiffuseLighting") }} diff --git a/files/fr/web/svg/attribute/core/index.md b/files/fr/web/svg/attribute/core/index.md index 68eba8a13f..ec5027b655 100644 --- a/files/fr/web/svg/attribute/core/index.md +++ b/files/fr/web/svg/attribute/core/index.md @@ -3,7 +3,7 @@ title: Attributs SVG de base slug: Web/SVG/Attribute/Core translation_of: Web/SVG/Attribute/Core --- -Les _attributs SVG de base_ sont tous les attributs communs pouvant être spécifiés sur n'importe quel élément SVG. +Les _attributs SVG de base_ sont tous les attributs communs pouvant être spécifiés sur n'importe quel élément SVG. - `id` - `lang` @@ -19,7 +19,7 @@ Les _attributs SVG de base_ sont tous les attributs communs pouvant être spé _Valuer_: Tout ID valide; _Animation_: **Non** - {{SVGAttr('lang')}} - - : 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 [document IETF "Tags for Identifying Languages" (BCP47)](https://www.ietf.org/rfc/bcp/bcp47.txt). + - : 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 [document IETF "Tags for Identifying Languages" (BCP47)](https://www.ietf.org/rfc/bcp/bcp47.txt). > **Note :** SVG 2 introduit l'attribut `lang`. Si les attributs `lang` et `xml:lang` sont tous les deux définis, `xml:lang` a la priorité sur `lang`. diff --git a/files/fr/web/svg/attribute/cx/index.md b/files/fr/web/svg/attribute/cx/index.md index 6738645445..234bcc8e97 100644 --- a/files/fr/web/svg/attribute/cx/index.md +++ b/files/fr/web/svg/attribute/cx/index.md @@ -101,7 +101,7 @@ Pour un élément {{SVGElement('ellipse')}}, `cx` définit la coordonnées x de ## radialGradient -Pour un élément {{SVGElement('radialGradient')}}, `cx` 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 [limite du dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") à **100%** corresponde au périmètre de ce plus grand cercle. +Pour un élément {{SVGElement('radialGradient')}}, `cx` 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 [limite du dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") à **100%** corresponde au périmètre de ce plus grand cercle. <table class="standard-table"> <tbody> diff --git a/files/fr/web/svg/attribute/cy/index.md b/files/fr/web/svg/attribute/cy/index.md index bfc3a0704a..7f4ab447d9 100644 --- a/files/fr/web/svg/attribute/cy/index.md +++ b/files/fr/web/svg/attribute/cy/index.md @@ -25,7 +25,7 @@ html,body,svg { height:100% } <stop offset="100%" stop-color="black" /> </radialGradient> - <circle cy="50" cx="50" r="45"/> + <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" /> </svg> @@ -101,7 +101,7 @@ Pour un élément {{SVGElement('ellipse')}}, `cy` définit la coordonnée y de s ## radialGradient -Pour un élément {{SVGElement('radialGradient')}}, `cy` 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 [limite de dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") de **100%** corresponde au périmètre de ce plus grand cercle. +Pour un élément {{SVGElement('radialGradient')}}, `cy` 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 [limite de dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") de **100%** corresponde au périmètre de ce plus grand cercle. <table class="standard-table"> <tbody> diff --git a/files/fr/web/svg/attribute/d/index.md b/files/fr/web/svg/attribute/d/index.md index 45b5d6043d..8fcaeb7919 100644 --- a/files/fr/web/svg/attribute/d/index.md +++ b/files/fr/web/svg/attribute/d/index.md @@ -8,11 +8,11 @@ translation_of: Web/SVG/Attribute/d --- {{SVGRef}} -L'attribut **`d`** définit un tracé à dessiner. +L'attribut **`d`** définit un tracé à dessiner. 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. -Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}} +Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}} ## Exemple @@ -22,7 +22,7 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <path fill="none" stroke="red" + <path fill="none" stroke="red" d="M 10,30 A 20, 20 0, 0, 1 50, 30 A 20, 20 0, 0, 1 90, 30 @@ -62,7 +62,7 @@ Pour un {{SVGElement('path')}}, `d` est une chaîne de caractère qui contient u > **Attention :** Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé. -Pour un {{SVGElement('glyph')}}, `d` 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. +Pour un {{SVGElement('glyph')}}, `d` 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. <table class="standard-table"> <tbody> @@ -85,13 +85,13 @@ Pour un {{SVGElement('glyph')}}, `d` est une chaîne de caractères qui contien </tbody> </table> -> **Note :** Le point d'origine (coordonnée `0,0`) est généralement le point du _coin en haut à gauche_ du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe. +> **Note :** Le point d'origine (coordonnée `0,0`) est généralement le point du _coin en haut à gauche_ du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe. ## missing-glyph > **Attention :** Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé. -Pour un {{SVGElement('missing-glyph')}}, `d` 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. +Pour un {{SVGElement('missing-glyph')}}, `d` 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. <table class="standard-table"> <tbody> @@ -128,7 +128,7 @@ SVG définit 6 types de commandes, pour un total de 20 commandes : > **Note :** 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. -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 `x` et `y` seront interprétées commandes coordonnées négatives; des valeurs `x` négatives se déplaceront vers la gauche; et des valeurs `y` négatives se déplaceront vers le haut. +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 `x` et `y` seront interprétées commandes coordonnées négatives; des valeurs `x` négatives se déplaceront vers la gauche; et des valeurs `y` négatives se déplaceront vers le haut. ## Moveto (aller à ) @@ -169,11 +169,11 @@ Finalement, toutes les commandes de courbes de Bézier peuvent servir de "polybà ## Arcto -Parfois il est plus simple de définir un `path` comme une courbe elliptique plutôt que comme une courbe de Bézier. Dans cette optique, les commandes Arcto sont supportées par les balises `path`. +Parfois il est plus simple de définir un `path` comme une courbe elliptique plutôt que comme une courbe de Bézier. Dans cette optique, les commandes Arcto sont supportées par les balises `path`. -La définition d'un Arcto est relativement complexe : `A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y`, où `rx` et `ry` représentent les rayons sur les axes x et y, respectivement ; `LargeArcFlag` est une valeur à 0 ou 1, et permet de déterminer si le plus petit (0) ou le plus grand (1) arc possible doit être dessiné ; `SweepFlag` est une valeur à 0 ou 1 et définit le sens de balayage de la courbe : horaire (1) ou anti-horaire (0) ; et enfin `x` et `y` sont les coordonnées de destination. +La définition d'un Arcto est relativement complexe : `A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y`, où `rx` et `ry` représentent les rayons sur les axes x et y, respectivement ; `LargeArcFlag` est une valeur à 0 ou 1, et permet de déterminer si le plus petit (0) ou le plus grand (1) arc possible doit être dessiné ; `SweepFlag` est une valeur à 0 ou 1 et définit le sens de balayage de la courbe : horaire (1) ou anti-horaire (0) ; et enfin `x` et `y` sont les coordonnées de destination. -La propriété `xAxisRotate` est censée changer l'axe des x relativement au viewport de référence. Cependant, il semble que cette propriété n'ait aucun effet avec le moteur de rendu Gecko 7. +La propriété `xAxisRotate` est censée changer l'axe des x relativement au viewport de référence. Cependant, il semble que cette propriété n'ait aucun effet avec le moteur de rendu Gecko 7. ## ClosePath (fermer un chemin) diff --git a/files/fr/web/svg/attribute/dy/index.md b/files/fr/web/svg/attribute/dy/index.md index 6889ac8204..a8ae811c3f 100644 --- a/files/fr/web/svg/attribute/dy/index.md +++ b/files/fr/web/svg/attribute/dy/index.md @@ -20,16 +20,16 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Lignes indiquant la position des glyphes --> - <line x1="10%" x2="10%" y1="0"  y2="100%" /> - <line x1="0"  x2="100%" y1="30%" y2="30%" /> - <line x1="0"  x2="100%" y1="80%" y2="80%" /> + <!-- Lignes indiquant la position des glyphes --> + <line x1="10%" x2="10%" y1="0" y2="100%" /> + <line x1="0" x2="100%" y1="30%" y2="30%" /> + <line x1="0" x2="100%" y1="80%" y2="80%" /> - <!-- Un texte de référence --> - <text x="10%" y="30%" fill="grey">SVG</text> + <!-- Un texte de référence --> + <text x="10%" y="30%" fill="grey">SVG</text> - <!-- Le même texte avec un décalage sur l'axe y --> - <text dy="50%" x="10%" y="30%">SVG</text> + <!-- Le même texte avec un décalage sur l'axe y --> + <text dy="50%" x="10%" y="30%">SVG</text> </svg> ``` @@ -186,29 +186,29 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Lignes horizontales --> - <line x1="0" x2="100%" y1="30" y2="30" /> - <line x1="0" x2="100%" y1="40" y2="40" /> - <line x1="0" x2="100%" y1="50" y2="50" /> - <line x1="0" x2="100%" y1="60" y2="60" /> - - <!-- Lignes verticales --> - <line x1="10" x2="10" y1="0" y2="100%" /> - <line x1="50" x2="50" y1="0" y2="100%" /> - <line x1="90" x2="90" y1="0" y2="100%" /> - - <!-- Le comportement change en fonction du nombre de valeurs de l'attribut --> - <text dy="20"     x="10" y="30">SVG</text> - <text dy="0 10"   x="50" y="30">SVG</text> - <text dy="0 10 20" x="90" y="30">SVG</text> + <!-- Lignes horizontales --> + <line x1="0" x2="100%" y1="30" y2="30" /> + <line x1="0" x2="100%" y1="40" y2="40" /> + <line x1="0" x2="100%" y1="50" y2="50" /> + <line x1="0" x2="100%" y1="60" y2="60" /> + + <!-- Lignes verticales --> + <line x1="10" x2="10" y1="0" y2="100%" /> + <line x1="50" x2="50" y1="0" y2="100%" /> + <line x1="90" x2="90" y1="0" y2="100%" /> + + <!-- Le comportement change en fonction du nombre de valeurs de l'attribut --> + <text dy="20" x="10" y="30">SVG</text> + <text dy="0 10" x="50" y="30">SVG</text> + <text dy="0 10 20" x="90" y="30">SVG</text> </svg> ``` ```css line { - stroke: red; - stroke-width: .5px; - stroke-dasharray: 3px; + stroke: red; + stroke-width: .5px; + stroke-dasharray: 3px; } ``` diff --git a/files/fr/web/svg/attribute/fill-opacity/index.md b/files/fr/web/svg/attribute/fill-opacity/index.md index f4039449e0..34bfa8c169 100644 --- a/files/fr/web/svg/attribute/fill-opacity/index.md +++ b/files/fr/web/svg/attribute/fill-opacity/index.md @@ -67,7 +67,7 @@ html,body,svg { height:100% } </tbody> </table> -> **Note :** SVG2 introduit les valeurs en pourcentage pour `fill-opacity`. Cependant, ce n'est pas souvent pris en charge pour le moment (_Voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`. +> **Note :** SVG2 introduit les valeurs en pourcentage pour `fill-opacity`. Cependant, ce n'est pas souvent pris en charge pour le moment (_Voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`. ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/attribute/fill-rule/index.md b/files/fr/web/svg/attribute/fill-rule/index.md index a3e4c78a38..488eb66676 100644 --- a/files/fr/web/svg/attribute/fill-rule/index.md +++ b/files/fr/web/svg/attribute/fill-rule/index.md @@ -23,8 +23,8 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- Valeur par défaut pour fill-rule --> - <polygon fill-rule="nonzero" stroke="red" -  points="50,0 21,90 98,35 2,35 79,90"/> + <polygon fill-rule="nonzero" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> <!-- Les points au centre de la forme ont 2 @@ -33,8 +33,8 @@ html,body,svg { height:100% } dehors de la forme, et l'intérieur de l'étoile est donc vide. --> - <polygon fill-rule="evenodd" stroke="red" -  points="150,0 121,90 198,35 102,35 179,90"/> + <polygon fill-rule="evenodd" stroke="red" + points="150,0 121,90 198,35 102,35 179,90"/> </svg> ``` @@ -75,27 +75,27 @@ html,body,svg { height:100% } ```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 --> - <polygon fill-rule="nonzero" stroke="red" -          points="50,0 21,90 98,35 2,35 79,90"/> - - <!-- - Effet sur une forme dans une forme - lorsque le segment va dans la même direction - (vers la droite) - --> - <path fill-rule="nonzero" stroke="red" -       d="M110,0 h90 v90 h-90 z -          M130,20 h50 v50 h-50 z"/> - - <!-- - Effet sur une forme dans une forme - lorsque le segment va dans la direction opposée - (vers la gauche contre vers la droite) - --> - <path fill-rule="nonzero" stroke="red" -       d="M210,0 h90 v90 h-90 z -          M230,20 v50 h50 v-50 z"/> + <!-- Effet de la règle de remplissage sur les segments qui se croisent --> + <polygon fill-rule="nonzero" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> + + <!-- + Effet sur une forme dans une forme + lorsque le segment va dans la même direction + (vers la droite) + --> + <path fill-rule="nonzero" stroke="red" + d="M110,0 h90 v90 h-90 z + M130,20 h50 v50 h-50 z"/> + + <!-- + Effet sur une forme dans une forme + lorsque le segment va dans la direction opposée + (vers la gauche contre vers la droite) + --> + <path fill-rule="nonzero" stroke="red" + d="M210,0 h90 v90 h-90 z + M230,20 v50 h50 v-50 z"/> </svg> ``` @@ -113,27 +113,27 @@ html,body,svg { height:100% } ```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 --> - <polygon fill-rule="evenodd" stroke="red" -          points="50,0 21,90 98,35 2,35 79,90"/> - - <!-- - Effet sur une forme dans une forme - lorsque le segment va dans la même direction - (vers la droite) - --> - <path fill-rule="evenodd" stroke="red" -       d="M110,0 h90 v90 h-90 z -          M130,20 h50 v50 h-50 z"/> - - <!-- - Effet sur une forme dans une forme - lorsque le segment va dans la direction opposée - (vers la gauche contre vers la droite) - --> - <path fill-rule="evenodd" stroke="red" -       d="M210,0 h90 v90 h-90 z -          M230,20 v50 h50 v-50 z"/> + <!-- Effet de la règle de remplissage sur les segments qui se croisent --> + <polygon fill-rule="evenodd" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> + + <!-- + Effet sur une forme dans une forme + lorsque le segment va dans la même direction + (vers la droite) + --> + <path fill-rule="evenodd" stroke="red" + d="M110,0 h90 v90 h-90 z + M130,20 h50 v50 h-50 z"/> + + <!-- + Effet sur une forme dans une forme + lorsque le segment va dans la direction opposée + (vers la gauche contre vers la droite) + --> + <path fill-rule="evenodd" stroke="red" + d="M210,0 h90 v90 h-90 z + M230,20 v50 h50 v-50 z"/> </svg> ``` diff --git a/files/fr/web/svg/attribute/fill/index.md b/files/fr/web/svg/attribute/fill/index.md index b90f9e2d8f..2190842df0 100644 --- a/files/fr/web/svg/attribute/fill/index.md +++ b/files/fr/web/svg/attribute/fill/index.md @@ -22,25 +22,25 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Remplir avec une simple couleur --> - <circle cx="50" cy="50" r="40" fill="pink" /> - - <!-- Remplir avec un dégradé --> - <defs> -   <radialGradient id="myGradient"> -     <stop offset="0%"  stop-color="pink" /> -     <stop offset="100%" stop-color="black" /> -   </radialGradient> - </defs> - <circle cx="150" cy="50" r="40" fill="url(#myGradient)" /> - - <!-- Définit l'état final d'un cercle animé --> - <circle cx="250" cy="50" r="20"> -   <animate attributeType="XML" -            attributeName="r" -            from="0" to="40" dur="5s" -            fill="freeze" /> - </circle> + <!-- Remplir avec une simple couleur --> + <circle cx="50" cy="50" r="40" fill="pink" /> + + <!-- Remplir avec un dégradé --> + <defs> + <radialGradient id="myGradient"> + <stop offset="0%" stop-color="pink" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + </defs> + <circle cx="150" cy="50" r="40" fill="url(#myGradient)" /> + + <!-- Définit l'état final d'un cercle animé --> + <circle cx="250" cy="50" r="20"> + <animate attributeType="XML" + attributeName="r" + from="0" to="40" dur="5s" + fill="freeze" /> + </circle> </svg> ``` diff --git a/files/fr/web/svg/attribute/height/index.md b/files/fr/web/svg/attribute/height/index.md index e8b1b9f7e9..fdbe09c669 100644 --- a/files/fr/web/svg/attribute/height/index.md +++ b/files/fr/web/svg/attribute/height/index.md @@ -8,9 +8,9 @@ translation_of: Web/SVG/Attribute/height --- « [SVG Attribute reference home](/fr/SVG/Attribute "en/SVG/Attribute") -Cet attribut indique une dimension verticale `<length>` 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). +Cet attribut indique une dimension verticale `<length>` 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). -Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%. +Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%. ## Contexte d'utilisation @@ -83,9 +83,9 @@ Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("sv ## Eléments -Les éléments suivants peuvent utiliser l'attribut `height` : +Les éléments suivants peuvent utiliser l'attribut `height` : -- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") » +- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") » - {{ SVGElement("filter") }} - {{ SVGElement("foreignObject") }} - {{ SVGElement("image") }} diff --git a/files/fr/web/svg/attribute/in/index.md b/files/fr/web/svg/attribute/in/index.md index f4ce9edcd6..9efefc7b37 100644 --- a/files/fr/web/svg/attribute/in/index.md +++ b/files/fr/web/svg/attribute/in/index.md @@ -68,25 +68,25 @@ Si la même valeur de {{SVGAttr("result")}} apparaît à de multiples endroits d ```html <div style="width: 420px; height: 220px;"> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> -  <filter id="backgroundMultiply"> + <defs> + <filter id="backgroundMultiply"> <!-- Ça ne marchera pas. --> -   <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/> -  </filter> - </defs> - <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);" /> + <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/> + </filter> + </defs> + <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> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> -  <filter id="imageMultiply"> + <defs> + <filter id="imageMultiply"> <!-- Solution de contournement. --> -   <feImage xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> -   <feBlend in2="SourceGraphic" mode="multiply"/> -  </filter> - </defs> - <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/> + <feImage xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <feBlend in2="SourceGraphic" mode="multiply"/> + </filter> + </defs> + <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/> </svg> </div> ``` @@ -95,7 +95,7 @@ Si la même valeur de {{SVGAttr("result")}} apparaît à de multiples endroits d ## Éléments -Les éléments suivants peuvent utiliser l'attribut `in`: +Les éléments suivants peuvent utiliser l'attribut `in`: - {{SVGElement("feBlend")}} - {{SVGElement("feColorMatrix")}} diff --git a/files/fr/web/svg/attribute/points/index.md b/files/fr/web/svg/attribute/points/index.md index 3f3012b7f7..7e43cf8592 100644 --- a/files/fr/web/svg/attribute/points/index.md +++ b/files/fr/web/svg/attribute/points/index.md @@ -18,7 +18,7 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline est une forme ouverte --> - <polyline stroke="black" fill="none" + <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> <!-- polygon est une forme fermée --> @@ -67,7 +67,7 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline est une forme ouverte --> - <polyline stroke="black" fill="none" + <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> </svg> ``` @@ -106,7 +106,7 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polygon est une forme fermée --> - <polygon stroke="black" fill="none" + <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" /> </svg> ``` diff --git a/files/fr/web/svg/attribute/presentation/index.md b/files/fr/web/svg/attribute/presentation/index.md index 7eef5286d7..cd8967d169 100644 --- a/files/fr/web/svg/attribute/presentation/index.md +++ b/files/fr/web/svg/attribute/presentation/index.md @@ -260,7 +260,7 @@ Les _attributs SVG de présentation_ sont des propriétés CSS pouvant être uti - : Définit la longueur des espaces entre les mots d'un texte. _Valeur_: [\<length>](/fr/SVG/Content_type#Length "https://developer.mozilla.org/en/SVG/Content_type#Length")|**`inherit`**; _Animation_: **Oui** - **{{SVGAttr('writing-mode')}}** - - : Spécifie si la direction d'un élément {{SVGElement('text')}} doit être de gauche-à -droite, droite-à -gauche, ou de haut-en-bas. + - : Spécifie si la direction d'un élément {{SVGElement('text')}} doit être de gauche-à -droite, droite-à -gauche, ou de haut-en-bas. _Valeur_: **`lr-tb`**|`rl-tb`|`tb-rl`|`lr`|`rl`|`tb`|`inherit`; _Animation_: **Oui** ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/attribute/seed/index.md b/files/fr/web/svg/attribute/seed/index.md index a1a659221d..6593ce1f7b 100644 --- a/files/fr/web/svg/attribute/seed/index.md +++ b/files/fr/web/svg/attribute/seed/index.md @@ -8,7 +8,7 @@ translation_of: Web/SVG/Attribute/seed --- « [Page de référence des attributs SVG](/fr/docs/Web/SVG/Attribute "en/SVG/Attribute") -L'attribut `seed` représente le nombre palier pour la pseudo génération d'un nombre aléatoire via la primitive {{SVGElement("feTurbulence")}}. +L'attribut `seed` représente le nombre palier pour la pseudo génération d'un nombre aléatoire via la primitive {{SVGElement("feTurbulence")}}. Si l'attribut n'est pas spécifié, alors le palier sera fixé à **0**. diff --git a/files/fr/web/svg/attribute/stroke-dasharray/index.md b/files/fr/web/svg/attribute/stroke-dasharray/index.md index 104acab79c..5a07fea97b 100644 --- a/files/fr/web/svg/attribute/stroke-dasharray/index.md +++ b/files/fr/web/svg/attribute/stroke-dasharray/index.md @@ -6,11 +6,11 @@ tags: - SVG translation_of: Web/SVG/Attribute/stroke-dasharray --- -L'attribut `stroke-dasharray` 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. +L'attribut `stroke-dasharray` 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. > **Note :** Comme il s'agit d'un attribut de présentation, `stroke-dasharray` peut aussi être utilisé directement dans une feuille de style CSS. -Les éléments suivants peuvent utiliser l'attribut `stroke-dasharray`: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} +Les éléments suivants peuvent utiliser l'attribut `stroke-dasharray`: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} ## Exemple @@ -59,7 +59,7 @@ html,body,svg { height:100% } </table> - \<dasharray> - - : Il s'agit d'une liste de mesures [\<length>](/fr/SVG/Content_type#Length "en/SVG/Content_type#Length") et [\<percentage>](/fr/SVG/Content_type#Percentage "en/SVG/Content_type#Percentage") 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, **5,3,2** sera rendu comme **5,3,2,5,3,2**. + - : Il s'agit d'une liste de mesures [\<length>](/fr/SVG/Content_type#Length "en/SVG/Content_type#Length") et [\<percentage>](/fr/SVG/Content_type#Percentage "en/SVG/Content_type#Percentage") 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, **5,3,2** sera rendu comme **5,3,2,5,3,2**. ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/attribute/stroke-dashoffset/index.md b/files/fr/web/svg/attribute/stroke-dashoffset/index.md index a256af04fc..9961fe37a6 100644 --- a/files/fr/web/svg/attribute/stroke-dashoffset/index.md +++ b/files/fr/web/svg/attribute/stroke-dashoffset/index.md @@ -22,43 +22,43 @@ html,body,svg { height:100% } ```html <svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> - <!-- Pas de tiret --> - <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> + <!-- Pas de tiret --> + <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> - <!-- Pas de décalage --> - <line x1="0" y1="3" x2="30" y2="3" stroke="black" -       stroke-dasharray="3 1" /> + <!-- Pas de décalage --> + <line x1="0" y1="3" x2="30" y2="3" stroke="black" + stroke-dasharray="3 1" /> - <!-- - Le début des tirets est décalé + <!-- + Le début des tirets est décalé de 3 unités vers la gauche - --> - <line x1="0" y1="5" x2="30" y2="5" stroke="black" -       stroke-dasharray="3 1" -       stroke-dashoffset="3" /> - - <!-- - Le début des tirets est décalé - de 3 unités vers la droite (-3) - --> - <line x1="0" y1="7" x2="30" y2="7" stroke="black" -       stroke-dasharray="3 1" -       stroke-dashoffset="-3" /> - - <!-- + --> + <line x1="0" y1="5" x2="30" y2="5" stroke="black" + stroke-dasharray="3 1" + stroke-dashoffset="3" /> + + <!-- + Le début des tirets est décalé + de 3 unités vers la droite (-3) + --> + <line x1="0" y1="7" x2="30" y2="7" stroke="black" + stroke-dasharray="3 1" + stroke-dashoffset="-3" /> + + <!-- Le début des tirets est décalé de 1 unité vers la gauche ce qui affiche la même chose que l'exemple précédent - --> - <line x1="0" y1="9" x2="30" y2="9" stroke="black" -       stroke-dasharray="3 1" -       stroke-dashoffset="1" /> - - <!-- - Lignes rouges pour indiquer la position - de départ des tirets - --> - <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" /> + --> + <line x1="0" y1="9" x2="30" y2="9" stroke="black" + stroke-dasharray="3 1" + stroke-dashoffset="1" /> + + <!-- + Lignes rouges pour indiquer la position + de départ des tirets + --> + <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> ``` diff --git a/files/fr/web/svg/attribute/stroke-linecap/index.md b/files/fr/web/svg/attribute/stroke-linecap/index.md index 82531a2d55..b9366c8aac 100644 --- a/files/fr/web/svg/attribute/stroke-linecap/index.md +++ b/files/fr/web/svg/attribute/stroke-linecap/index.md @@ -23,23 +23,23 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "butt" (valeur par défaut) --> - <line x1="1" y1="1" x2="5" y2="1" stroke="black" -       stroke-linecap="butt" /> + <!-- Effet de la valeur "butt" (valeur par défaut) --> + <line x1="1" y1="1" x2="5" y2="1" stroke="black" + stroke-linecap="butt" /> - <!-- Effet de la valeur "round" --> - <line x1="1" y1="3" x2="5" y2="3" stroke="black" -       stroke-linecap="round" /> + <!-- Effet de la valeur "round" --> + <line x1="1" y1="3" x2="5" y2="3" stroke="black" + stroke-linecap="round" /> - <!-- Effet de la valeur "square" --> - <line x1="1" y1="5" x2="5" y2="5" stroke="black" -       stroke-linecap="square" /> + <!-- Effet de la valeur "square" --> + <line x1="1" y1="5" x2="5" y2="5" stroke="black" + stroke-linecap="square" /> - <!-- + <!-- Les lignes roses indiquent la position du chemin pour chaque trait - --> - <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" /> + --> + <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" /> </svg> ``` @@ -77,20 +77,20 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "butt" --> - <path d="M1,1 h4" stroke="black" -       stroke-linecap="butt" /> + <!-- Effet de la valeur "butt" --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="butt" /> - <!-- Effet de la valeur "butt" sur un chemin de longueur zéro --> - <path d="M3,3 h0" stroke="black" -       stroke-linecap="butt" /> + <!-- Effet de la valeur "butt" sur un chemin de longueur zéro --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="butt" /> - <!-- + <!-- Lignes roses pour indiquer la position du chemin pour chaque trait - --> - <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> @@ -112,20 +112,20 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "round" --> - <path d="M1,1 h4" stroke="black" -       stroke-linecap="round" /> + <!-- Effet de la valeur "round" --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="round" /> - <!-- Effet de la valeur "round" sur un chemin de longueur zéro --> - <path d="M3,3 h0" stroke="black" -       stroke-linecap="round" /> + <!-- Effet de la valeur "round" sur un chemin de longueur zéro --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="round" /> - <!-- + <!-- Lignes roses pour indiquer la position du chemin pour chaque trait - --> - <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> @@ -147,19 +147,19 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "square" --> - <path d="M1,1 h4" stroke="black" -       stroke-linecap="square" /> + <!-- Effet de la valeur "square" --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="square" /> - <!-- Effet de la valeur "square" sur un chemin de longueur zéro --> - <path d="M3,3 h0" stroke="black" -       stroke-linecap="square" /> + <!-- Effet de la valeur "square" sur un chemin de longueur zéro --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="square" /> - <!-- - Les lignes roses indiquent la position - du chemin pour chaque trait - --> - <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + <!-- + Les lignes roses indiquent la position + du chemin pour chaque trait + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> diff --git a/files/fr/web/svg/attribute/stroke-linejoin/index.md b/files/fr/web/svg/attribute/stroke-linejoin/index.md index 2794f48e80..bf94dd23d8 100644 --- a/files/fr/web/svg/attribute/stroke-linejoin/index.md +++ b/files/fr/web/svg/attribute/stroke-linejoin/index.md @@ -22,58 +22,58 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> - <!-- - Chemin en haut à gauche: - Effet de la valeur "miter" - --> - <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" -       stroke-linejoin="miter" /> - - <!-- - Chemin en haut au milieu: - Effet de la valeur "round" - --> - <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" -       stroke-linejoin="round" /> - - <!-- - Chemin en haut à droite: - Effet de la valeur "bevel" - --> - <path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" -       stroke-linejoin="bevel" /> - - <!-- - Chemin en bas à gauche: - Effet de la valeur "miter-clip" - se replit sur la valeur par défaut (miter) si non pris en charge - --> - <path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" -       stroke-linejoin="miter-clip" /> - - <!-- - Chemin en bas à droite: - Effet de la valeur "arcs" - se replit sur la valeur par défaut (miter) si non pris en charge - --> - <path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" -       stroke-linejoin="arcs" /> - - <!-- - Lignes roses qui indiquent la position - du chemin pour chaque trait - --> - <g id="highlight"> -   <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" -         stroke="pink" fill="none" stroke-width="0.025" /> -   <circle cx="1" cy="5"  r="0.05" fill="pink" /> -   <circle cx="3" cy="2"  r="0.05" fill="pink" /> -   <circle cx="5" cy="5.5" r="0.05" fill="pink" /> - </g> - <use xlink:href="#highlight" x="6" /> - <use xlink:href="#highlight" x="12" /> - <use xlink:href="#highlight" x="2" y="6" /> - <use xlink:href="#highlight" x="8" y="6" /> + <!-- + Chemin en haut à gauche: + Effet de la valeur "miter" + --> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="miter" /> + + <!-- + Chemin en haut au milieu: + Effet de la valeur "round" + --> + <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="round" /> + + <!-- + Chemin en haut à droite: + Effet de la valeur "bevel" + --> + <path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="bevel" /> + + <!-- + Chemin en bas à gauche: + Effet de la valeur "miter-clip" + se replit sur la valeur par défaut (miter) si non pris en charge + --> + <path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="miter-clip" /> + + <!-- + Chemin en bas à droite: + Effet de la valeur "arcs" + se replit sur la valeur par défaut (miter) si non pris en charge + --> + <path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="arcs" /> + + <!-- + Lignes roses qui indiquent la position + du chemin pour chaque trait + --> + <g id="highlight"> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5.5" r="0.05" fill="pink" /> + </g> + <use xlink:href="#highlight" x="6" /> + <use xlink:href="#highlight" x="12" /> + <use xlink:href="#highlight" x="2" y="6" /> + <use xlink:href="#highlight" x="8" y="6" /> </svg> ``` @@ -120,7 +120,7 @@ html,body,svg { height:100% } stroke-linejoin="arcs" /> <!-- -  Lignes roses qui indiquent la position + Lignes roses qui indiquent la position du chemin pour chaque trait --> <g id="p"> @@ -195,7 +195,7 @@ html,body,svg { height:100% } <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> <!-- -  Lignes roses qui indiquent la position + Lignes roses qui indiquent la position du chemin pour chaque trait --> <g> @@ -244,7 +244,7 @@ html,body,svg { height:100% } <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> <!-- -  Lignes roses qui indiquent la position + Lignes roses qui indiquent la position du chemin pour chaque trait --> <g> diff --git a/files/fr/web/svg/attribute/stroke-opacity/index.md b/files/fr/web/svg/attribute/stroke-opacity/index.md index 7eababea65..c840462907 100644 --- a/files/fr/web/svg/attribute/stroke-opacity/index.md +++ b/files/fr/web/svg/attribute/stroke-opacity/index.md @@ -67,7 +67,7 @@ html,body,svg { height:100% } </tbody> </table> -> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-opacity`, Cependant, ce n'est pas souvent pris en charge. pour le moment (_voir {{anch("Compatibilité des navigateurs")}} ci-dessous_), il est par conséquent recommendé d'utiliser les valeurs de l'intervalle `[0-1]`. +> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-opacity`, Cependant, ce n'est pas souvent pris en charge. pour le moment (_voir {{anch("Compatibilité des navigateurs")}} ci-dessous_), il est par conséquent recommendé d'utiliser les valeurs de l'intervalle `[0-1]`. 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')}}. diff --git a/files/fr/web/svg/attribute/stroke-width/index.md b/files/fr/web/svg/attribute/stroke-width/index.md index a80300ad2a..3ccc50b247 100644 --- a/files/fr/web/svg/attribute/stroke-width/index.md +++ b/files/fr/web/svg/attribute/stroke-width/index.md @@ -46,7 +46,7 @@ html,body,svg { height:100% } <td> <strong ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong - > | + > | <strong ><a href="/docs/Web/SVG/Content_type#Percentage" ><percentage></a @@ -65,7 +65,7 @@ html,body,svg { height:100% } </tbody> </table> -> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-width`, Cependant, ce n'est pas souvent pris en charge pour le moment (_voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`. +> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-width`, Cependant, ce n'est pas souvent pris en charge pour le moment (_voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`. Une valeur en pourcentage est toujours calculée en tant que pourcentage de la longueur diagonale {{SVGAttr('viewBox')}} normalisée. diff --git a/files/fr/web/svg/attribute/transform/index.md b/files/fr/web/svg/attribute/transform/index.md index c5e38b93b8..2083854ea3 100644 --- a/files/fr/web/svg/attribute/transform/index.md +++ b/files/fr/web/svg/attribute/transform/index.md @@ -18,15 +18,15 @@ html,body,svg { height:100% } ```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" + <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewX(40) scale(1 0.5)"> -   <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> - </g> + <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> + </g> - <use xlink:href="#heart" fill="none" stroke="red"/> + <use xlink:href="#heart" fill="none" stroke="red"/> </svg> ``` @@ -126,20 +126,20 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Pas de translation --> - <rect x="5" y="5" width="40" height="40" fill="green" /> + <!-- Pas de translation --> + <rect x="5" y="5" width="40" height="40" fill="green" /> - <!-- Translation horizontale --> - <rect x="5" y="5" width="40" height="40" fill="blue" -       transform="translate(50)" /> + <!-- Translation horizontale --> + <rect x="5" y="5" width="40" height="40" fill="blue" + transform="translate(50)" /> - <!-- Translation verticale --> - <rect x="5" y="5" width="40" height="40" fill="red" -       transform="translate(0 50)" /> + <!-- Translation verticale --> + <rect x="5" y="5" width="40" height="40" fill="red" + transform="translate(0 50)" /> - <!-- Translation horizontale et verticale --> - <rect x="5" y="5" width="40" height="40" fill="yellow" -        transform="translate(50,50)" /> + <!-- Translation horizontale et verticale --> + <rect x="5" y="5" width="40" height="40" fill="yellow" + transform="translate(50,50)" /> </svg> ``` @@ -157,20 +157,20 @@ html,body,svg { height:100% } ```html <svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> - <!-- uniform scale --> - <circle cx="0" cy="0" r="10" fill="red" -         transform="scale(4)" /> + <!-- uniform scale --> + <circle cx="0" cy="0" r="10" fill="red" + transform="scale(4)" /> - <!-- vertical scale --> - <circle cx="0" cy="0" r="10" fill="yellow" -         transform="scale(1,4)" /> + <!-- vertical scale --> + <circle cx="0" cy="0" r="10" fill="yellow" + transform="scale(1,4)" /> - <!-- horizontal scale --> - <circle cx="0" cy="0" r="10" fill="pink" -         transform="scale(4,1)" /> + <!-- horizontal scale --> + <circle cx="0" cy="0" r="10" fill="pink" + transform="scale(4,1)" /> - <!-- No scale --> - <circle cx="0" cy="0" r="10" fill="black" /> + <!-- No scale --> + <circle cx="0" cy="0" r="10" fill="black" /> </svg> ``` @@ -188,15 +188,15 @@ html,body,svg { height:100% } ```html <svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"> - <rect x="0" y="0" width="10" height="10" /> + <rect x="0" y="0" width="10" height="10" /> - <!-- rotation is done around the point 0,0 --> - <rect x="0" y="0" width="10" height="10" fill="red" -       transform="rotate(100)" /> + <!-- rotation is done around the point 0,0 --> + <rect x="0" y="0" width="10" height="10" fill="red" + transform="rotate(100)" /> - <!-- rotation is done around the point 10,10 --> - <rect x="0" y="0" width="10" height="10" fill="green" -       transform="rotate(100,10,10)" /> + <!-- rotation is done around the point 10,10 --> + <rect x="0" y="0" width="10" height="10" fill="green" + transform="rotate(100,10,10)" /> </svg> ``` @@ -214,10 +214,10 @@ html,body,svg { height:100% } ```html <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> - <rect x="-3" y="-3" width="6" height="6" /> + <rect x="-3" y="-3" width="6" height="6" /> - <rect x="-3" y="-3" width="6" height="6" fill="red" -       transform="skewX(30)" /> + <rect x="-3" y="-3" width="6" height="6" fill="red" + transform="skewX(30)" /> </svg> ``` @@ -235,10 +235,10 @@ html,body,svg { height:100% } ```html <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> - <rect x="-3" y="-3" width="6" height="6" /> + <rect x="-3" y="-3" width="6" height="6" /> - <rect x="-3" y="-3" width="6" height="6" fill="red" -       transform="skewY(30)" /> + <rect x="-3" y="-3" width="6" height="6" fill="red" + transform="skewY(30)" /> </svg> ``` diff --git a/files/fr/web/svg/attribute/viewbox/index.md b/files/fr/web/svg/attribute/viewbox/index.md index 2ade5dcb69..eb859254cf 100644 --- a/files/fr/web/svg/attribute/viewbox/index.md +++ b/files/fr/web/svg/attribute/viewbox/index.md @@ -8,11 +8,11 @@ translation_of: Web/SVG/Attribute/viewBox --- « [Sommaire de la référence des attributs SVG](/fr/SVG/Attribute) -L'attribut `viewBox` permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur. +L'attribut `viewBox` permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur. -La valeur de l'attribut `viewBox` est une liste de quatre nombres `min-x`, `min-y`, `width` et `height`, séparés par des espaces ou/et des virgules. Ces nombres spécifient un rectangle dans l'espace utilisateur, qui doit correspondre aux coins du viewport établis par l'élément SVG donné, ceci en prenant en compte l'attribut {{ SVGAttr("preserveAspectRatio") }}. +La valeur de l'attribut `viewBox` est une liste de quatre nombres `min-x`, `min-y`, `width` et `height`, séparés par des espaces ou/et des virgules. Ces nombres spécifient un rectangle dans l'espace utilisateur, qui doit correspondre aux coins du viewport établis par l'élément SVG donné, ceci en prenant en compte l'attribut {{ SVGAttr("preserveAspectRatio") }}. -Les valeurs négatives de `width` et `height` ne sont pas autorisées et une valeur à zéro désactive le rendu de l'élément. +Les valeurs négatives de `width` et `height` ne sont pas autorisées et une valeur à zéro désactive le rendu de l'élément. ## Contexte d'utilisation @@ -43,17 +43,17 @@ Les valeurs négatives de `width` et `height` ne sont pas autorisées et une va ## Exemple -Nous créons ici un viewport de 300×200 unités, ce qui fait que chaque unité de l'élément SVG correspondra à une unité du viewport. On aura donc un élément SVG dont le système de coordonnée ira de 0 à 300 en largeur et de 0 à 200 en hauteur : +Nous créons ici un viewport de 300×200 unités, ce qui fait que chaque unité de l'élément SVG correspondra à une unité du viewport. On aura donc un élément SVG dont le système de coordonnée ira de 0 à 300 en largeur et de 0 à 200 en hauteur : `<svg width="300" height="200"></svg>` -En ajoutant une notion de viewbox, nous transformons ce système de coordonnées afin qu'il aille de 0 à w à l'horizontale et de 0 à h à la verticale. Ici, ce sera donc 300/30 (=10) en x ce qui équivaut à 10 unités d'élément SVG pour 1 unité du viewport : +En ajoutant une notion de viewbox, nous transformons ce système de coordonnées afin qu'il aille de 0 à w à l'horizontale et de 0 à h à la verticale. Ici, ce sera donc 300/30 (=10) en x ce qui équivaut à 10 unités d'élément SVG pour 1 unité du viewport : `<svg width="300" height="200" viewBox="0 0 30 20"></svg>` ## Elements -Les éléments suivants peuvent utiliser l'attribut `viewBox` +Les éléments suivants peuvent utiliser l'attribut `viewBox` - {{ SVGElement("svg") }} - {{ SVGElement("symbol") }} diff --git a/files/fr/web/svg/attribute/width/index.md b/files/fr/web/svg/attribute/width/index.md index f86b517005..21d79085c8 100644 --- a/files/fr/web/svg/attribute/width/index.md +++ b/files/fr/web/svg/attribute/width/index.md @@ -5,9 +5,9 @@ translation_of: Web/SVG/Attribute/width --- « [SVG Attribute reference home](/fr/SVG/Attribute "en/SVG/Attribute") -Cet attribut indique une dimension horizontale `<length>` 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). +Cet attribut indique une dimension horizontale `<length>` 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). -Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% (exepté pour l'élément racine {{ SVGElement("svg") }} qui possède un parent HTML),  {{ SVGElement("filter") }} et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%. +Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% (exepté pour l'élément racine {{ SVGElement("svg") }} qui possède un parent HTML), {{ SVGElement("filter") }} et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%. ## Contexte d'utilisation @@ -80,9 +80,9 @@ Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("sv ## Eléments -Les éléments suivants peuvent utiliser l'attribut `width` : +Les éléments suivants peuvent utiliser l'attribut `width` : -- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") » +- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") » - {{ SVGElement("filter") }} - {{ SVGElement("foreignObject") }} - {{ SVGElement("image") }} |