diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2022-03-16 17:52:18 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-03-16 17:52:18 +0100 |
| commit | 500f444d23a7a758da229ebe6b9691cc5d4fe731 (patch) | |
| tree | ca277561f7f3c5f2c9c3e80a895ac32f30852238 /files/fr/web/svg | |
| parent | de831e4687986c3a60b9ced69ce9faefda8df4b9 (diff) | |
| download | translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.tar.gz translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.tar.bz2 translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.zip | |
Fix #4269 - Removes empty/special characters (#4270)
* Remove ufeff
* Remove u2064
* Remove u2062
* Replace u202f followed by : with :
* Replace u202f next to « or » with and « or »
* Replace u202f followed by ; with ;
* Replace u202f followed by ! with
* Replace u202f followed by ? with ?
* Replace remaining u202f with classical space
* Replace u200b surrounded by space with classical space
* Replace u200b surrounded by space with classical space - again (repeated)
* Remove remaining u200b
* Remove u200a
* Replace u2009 with
* Remove u00ad
* Replace u00a0 followed by : ! or ? with and punctuation
* Replace u00a0 surrounded « or » with and punctuation
* Replace u00a0 followed by whitespaces
* Replace u00a0 preceded by whitespaces
* Replace u00a0 followed by a newline with a newline
* Replace u00a0 followed by a newline with a newline - Take2
* Replace u00a0 followed by a ; and punctuation
* Remove u00a0 followed by ,
* Remove u00a0 in indentation spaces with \n([ ]*)([\u00a0])([ ]*)
* Manual replacement of ([\u00a0])([ ]+)
* Replace remaining ([\u00a0]+) by a space
* cleaning empty elements
* remove ufe0f
* Remove u00a0 and u202f after merging against updated main
* remove double whitespace using (\w)( )(\w)
Diffstat (limited to 'files/fr/web/svg')
71 files changed, 630 insertions, 630 deletions
diff --git a/files/fr/web/svg/applying_svg_effects_to_html_content/index.md b/files/fr/web/svg/applying_svg_effects_to_html_content/index.md index 2cafc5a036..01fd6f0005 100644 --- a/files/fr/web/svg/applying_svg_effects_to_html_content/index.md +++ b/files/fr/web/svg/applying_svg_effects_to_html_content/index.md @@ -113,7 +113,7 @@ Vous pouvez faire des changements en temps réel et vous rendre compte qu'ils af ```js function toggleRadius() { var circle = document.getElementById("circle"); - circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; + circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; } ``` @@ -165,20 +165,20 @@ Et encore d'autres filtres : ```html <svg height="0"> <filter id="f3"> - <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" -   order="3" kernelMatrix="0 -1 0  -1 4 -1  0 -1 0" preserveAlpha="true"/> - </filter> + <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/> + </filter> <filter id="f4"> - <feSpecularLighting surfaceScale="5" specularConstant="1" -                   specularExponent="10" lighting-color="white"> -  <fePointLight x="-5000" y="-10000" z="20000"/> - </feSpecularLighting> + <feSpecularLighting surfaceScale="5" specularConstant="1" + specularExponent="10" lighting-color="white"> + <fePointLight x="-5000" y="-10000" z="20000"/> + </feSpecularLighting> </filter> <filter id="f5"> -  <feColorMatrix values="1 0 0 0 0 -                          0 1 0 0 0 -                          0 0 1 0 0 -                          0 1 0 0 0" style="color-interpolation-filters:sRGB"/> + <feColorMatrix values="1 0 0 0 0 + 0 1 0 0 0 + 0 0 1 0 0 + 0 1 0 0 0" style="color-interpolation-filters:sRGB"/> </filter> </svg> ``` 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") }} diff --git a/files/fr/web/svg/element/animatetransform/index.md b/files/fr/web/svg/element/animatetransform/index.md index f8eec01ee7..3b8992f730 100644 --- a/files/fr/web/svg/element/animatetransform/index.md +++ b/files/fr/web/svg/element/animatetransform/index.md @@ -48,7 +48,7 @@ L'élément **`<animateTransform>`** permet d'animer un élement en appliquant u - [Attributs de ciblage d'animation](/fr/docs/SVG/Attribute#AnimationAttributeTarget "en/SVG/Attribute#AnimationAttributeTarget") » - [Attributs de chronométrage d'animation](/fr/docs/SVG/Attribute#AnimationTiming "en/SVG/Attribute#AnimationTiming") » - [Attributs de valeur d'animation](/fr/docs/SVG/Attribute#AnimationValue "en/SVG/Attribute#AnimationValue") » -- [Attributs d'ajout d'animations](/fr/docs/SVG/Attribute#AnimationAddition "en/SVG/Attribute#AnimationAddition") » +- [Attributs d'ajout d'animations](/fr/docs/SVG/Attribute#AnimationAddition "en/SVG/Attribute#AnimationAddition") » - {{ SVGAttr("externalResourcesRequired") }} ### Attributs spécifiques diff --git a/files/fr/web/svg/element/clippath/index.md b/files/fr/web/svg/element/clippath/index.md index 562237cd56..2fa4a9737e 100644 --- a/files/fr/web/svg/element/clippath/index.md +++ b/files/fr/web/svg/element/clippath/index.md @@ -8,7 +8,7 @@ translation_of: Web/SVG/Element/clipPath --- {{SVGRef}} -L'élément [SVG](/fr/docs/Web/SVG) **`<clipPath>`** définit un détourage. Ce détourage peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("clip-path")}}. +L'élément [SVG](/fr/docs/Web/SVG) **`<clipPath>`** définit un détourage. Ce détourage peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("clip-path")}}. Le détourage limite la zone dans laquelle l'élément sur lequel il est appliqué sera dessiné. Autrement dit, les parties de l'élément en dehors de la forme créée par le détourage ne seront pas affichées. @@ -20,19 +20,19 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100"> - <clipPath id="myClip"> + <clipPath id="myClip"> <!-- La forme créée par le détourage est un simple cercle. --> -   <circle cx="40" cy="35" r="35" /> - </clipPath> + <circle cx="40" cy="35" r="35" /> + </clipPath> <!-- Le coeur sans détourage, pour référence --> - <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" /> + <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" /> <!-- Le coeur avec détourage. Seule la partie à l'intérieur du cercle est visible. --> - <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" /> + <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" /> </svg> ``` @@ -59,7 +59,7 @@ Par défaut, les événements de pointeur ne sont pas déclenchés sur les régi - {{SVGAttr("clipPathUnits")}} - : Cet attribut définit le système de coordonnées pour le contenu de l'élément `<clipPath>`. - _Valeur_: `userSpaceOnUse`|`objectBoundingBox` ; _Valeur par défaut_: `userSpaceOnUse`; _Animation_: **oui** + _Valeur_: `userSpaceOnUse`|`objectBoundingBox` ; _Valeur par défaut_: `userSpaceOnUse`; _Animation_: **oui** ### Attributs globaux @@ -80,7 +80,7 @@ Par défaut, les événements de pointeur ne sont pas déclenchés sur les régi | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | -| {{SpecName("CSS Masks", "#ClipPathElement", "<clipPath>")}} | {{Spec2("CSS Masks")}} |  | +| {{SpecName("CSS Masks", "#ClipPathElement", "<clipPath>")}} | {{Spec2("CSS Masks")}} | | | {{SpecName("SVG1.1", "masking.html#EstablishingANewClippingPath", "<clipPath>")}} | {{Spec2("SVG1.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/defs/index.md b/files/fr/web/svg/element/defs/index.md index 91f0b9ebe4..cf10e952db 100644 --- a/files/fr/web/svg/element/defs/index.md +++ b/files/fr/web/svg/element/defs/index.md @@ -27,7 +27,7 @@ Les éléments définis grâce à `defs` ne sont jamais directement générés ( </linearGradient> </defs> -  <rect x="10" y="10" width="60" height="10" + <rect x="10" y="10" width="60" height="10" fill="url(#Gradient01)" /> </svg> ``` @@ -36,10 +36,10 @@ Les éléments définis grâce à `defs` ne sont jamais directement générés ( ### Attributs globaux -- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#ConditionalProccessing) » -- [Core attributes](/fr/docs/Web/SVG/Attribute#Core) » -- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#GraphicalEvent) » -- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation) » +- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#ConditionalProccessing) » +- [Core attributes](/fr/docs/Web/SVG/Attribute#Core) » +- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#GraphicalEvent) » +- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation) » - {{SVGAttr("class")}} - {{SVGAttr("style")}} - {{SVGAttr("externalResourcesRequired")}} @@ -57,7 +57,7 @@ Cet élément est implémenté par l'interface [`SVGDefsElement`](/fr/docs/Web/A | Spécification | Status | Commentaire | | ---------------------------------------------------------------------------- | ------------------------ | ------------------ | -| {{SpecName('SVG2', 'struct.html#Head', '<defs>')}} | {{Spec2('SVG2')}} |  | +| {{SpecName('SVG2', 'struct.html#Head', '<defs>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'struct.html#Head', '<defs>')}} | {{Spec2('SVG1.1')}} | Initial definition | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/desc/index.md b/files/fr/web/svg/element/desc/index.md index e40cec135f..e905577409 100644 --- a/files/fr/web/svg/element/desc/index.md +++ b/files/fr/web/svg/element/desc/index.md @@ -21,7 +21,7 @@ Quand l'élément contenant une description apparaît à l'utilisateur sous form ### Attributs globaux -- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") » +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") » - {{ SVGAttr("class") }} - {{ SVGAttr("style") }} @@ -29,7 +29,7 @@ Quand l'élément contenant une description apparaît à l'utilisateur sous form _(Aucun)_ -## Interface DOM +## Interface DOM Cet élément implémente l'interface [`SVGDescElement`](/fr/docs/Web/API/SVGDescElement "en/DOM/SVGDescElement"). diff --git a/files/fr/web/svg/element/ellipse/index.md b/files/fr/web/svg/element/ellipse/index.md index 8f5721456c..c9c210d70d 100644 --- a/files/fr/web/svg/element/ellipse/index.md +++ b/files/fr/web/svg/element/ellipse/index.md @@ -64,7 +64,7 @@ L'élément `ellipse` est une forme basique SVG,utilisé pour créer des ellipse | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------ | ------------------------------------------- | -| {{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}} | {{Spec2('SVG2')}} | Ajout de la valeur `auto` pour `rx` et `ry` | +| {{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}} | {{Spec2('SVG2')}} | Ajout de la valeur `auto` pour `rx` et `ry` | | {{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Interface DOM diff --git a/files/fr/web/svg/element/fecomponenttransfer/index.md b/files/fr/web/svg/element/fecomponenttransfer/index.md index 5db55d9aa2..07497c5713 100644 --- a/files/fr/web/svg/element/fecomponenttransfer/index.md +++ b/files/fr/web/svg/element/fecomponenttransfer/index.md @@ -40,7 +40,7 @@ Cet élément implémente l'interface {{domxref("SVGFEComponentTransferElement") ### SVG ```html -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> <defs> <linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> @@ -112,7 +112,7 @@ rect { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -| {{SpecName('Filters 1.0', '#feComponentTransferElement', '<feComponentTransfer>')}} | {{Spec2('Filters 1.0')}} | Spécifie que les fonctions de transfert non définies sont traitées comme si elles avaient été définies avec pour {{SVGAttr("type")}} `identity`. | +| {{SpecName('Filters 1.0', '#feComponentTransferElement', '<feComponentTransfer>')}} | {{Spec2('Filters 1.0')}} | Spécifie que les fonctions de transfert non définies sont traitées comme si elles avaient été définies avec pour {{SVGAttr("type")}} `identity`. | | {{SpecName('SVG1.1', 'filters.html#feComponentTransferElement', '<feComponentTransfer>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/feconvolvematrix/index.md b/files/fr/web/svg/element/feconvolvematrix/index.md index f2845a66d0..4d1ba5a071 100644 --- a/files/fr/web/svg/element/feconvolvematrix/index.md +++ b/files/fr/web/svg/element/feconvolvematrix/index.md @@ -13,13 +13,13 @@ La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feConvolveMatrix>`** applique Une convolution de matrice se fonde sur une matrice n par m (le noyau de convolution), qui décrit la façon dont une valeur de pixel donné de l'image en entrée est combinée avec celles des pixels de son voisinage pour aboutir à une valeur de pixel résultante. Chaque pixel du résultat est déterminé par l'application de la matrice noyau sur le pixel source correspondant et ses pixels voisins. La formule de convolution de base, appliquée à chaque valeur de couleur d'un pixel donné, est : -COLOR<sub>X,Y</sub> = ( -              SUM <sub>I=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-1]</sub> { -                SUM <sub>J=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-1]</sub> { -                  SOURCE <sub>X-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetXAttribute">targetX</a>+J, Y-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetYAttribute">targetY</a>+I</sub> \*  [kernelMatrix](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementKernelMatrixAttribute)<sub><a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-J-1,  <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-I-1</sub> -                } -              } -            ) /  [divisor](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementDivisorAttribute) +  [bias](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementBiasAttribute) \* ALPHA<sub>X,Y</sub> +COLOR<sub>X,Y</sub> = ( + SUM <sub>I=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-1]</sub> { + SUM <sub>J=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-1]</sub> { + SOURCE <sub>X-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetXAttribute">targetX</a>+J, Y-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetYAttribute">targetY</a>+I</sub> \* [kernelMatrix](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementKernelMatrixAttribute)<sub><a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-J-1, <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-I-1</sub> + } + } + ) / [divisor](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementDivisorAttribute) + [bias](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementBiasAttribute) \* ALPHA<sub>X,Y</sub> dans laquelle @@ -112,7 +112,7 @@ Cet élément implémente l'interface {{domxref("SVGFEConvolveMatrixElement")}}. | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("Filters 1.0", "#feConvolveMatrixElement", "<feConvolveMatrix>")}} | {{Spec2("Filters 1.0")}} |  | +| {{SpecName("Filters 1.0", "#feConvolveMatrixElement", "<feConvolveMatrix>")}} | {{Spec2("Filters 1.0")}} | | | {{SpecName("SVG1.1", "filters.html#feConvolveMatrixElement", "<feConvolveMatrix>")}} | {{Spec2("SVG1.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/feimage/index.md b/files/fr/web/svg/element/feimage/index.md index f6c00eac7e..8acb56e010 100644 --- a/files/fr/web/svg/element/feimage/index.md +++ b/files/fr/web/svg/element/feimage/index.md @@ -8,7 +8,7 @@ translation_of: Web/SVG/Element/feImage --- {{SVGRef}} -La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feImage>`** extrait les données d'une image d'une source externe et retourne les pixels récupérés en sortie (autrement dit, si l'image récupérée est une image SVG, elle sortira comme raster) +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feImage>`** extrait les données d'une image d'une source externe et retourne les pixels récupérés en sortie (autrement dit, si l'image récupérée est une image SVG, elle sortira comme raster) ## Contexte d'utilisation diff --git a/files/fr/web/svg/element/femergenode/index.md b/files/fr/web/svg/element/femergenode/index.md index 92de098015..32b4816929 100644 --- a/files/fr/web/svg/element/femergenode/index.md +++ b/files/fr/web/svg/element/femergenode/index.md @@ -19,22 +19,22 @@ L'élément SVG `feMergeNode` se place à l'intérieur d'un élément {{ SVGElem ```html <svg width="200" height="200" - xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - -  <filter id="feOffset" x="-40" y="-20" width="100" height="200"> -    <feOffset in="SourceGraphic" dx="60" dy="60" /> -    <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" /> -    <feMerge> -      <feMergeNode in="blur2" /> -      <feMergeNode in="SourceGraphic" /> -    </feMerge> -  </filter> + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <filter id="feOffset" x="-40" y="-20" width="100" height="200"> + <feOffset in="SourceGraphic" dx="60" dy="60" /> + <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" /> + <feMerge> + <feMergeNode in="blur2" /> + <feMergeNode in="SourceGraphic" /> + </feMerge> + </filter> <rect x="40" y="40" width="100" height="100" -    style="stroke: #000000; fill: green; filter: url(#feOffset);" /> + style="stroke: #000000; fill: green; filter: url(#feOffset);" /> <rect x="40" y="40" width="100" height="100" -    style="stroke: #000000; fill: green;" /> + style="stroke: #000000; fill: green;" /> </svg> ``` @@ -60,7 +60,7 @@ Cet élément implémente l'interface {{domxref("SVGFEMergeNodeElement")}}. | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName('Filters 1.0', '#elementdef-femergenode', '<feMergeNode>')}} | {{Spec2('Filters 1.0')}} |  | +| {{SpecName('Filters 1.0', '#elementdef-femergenode', '<feMergeNode>')}} | {{Spec2('Filters 1.0')}} | | | {{SpecName('SVG1.1', 'filters.html#feMergeNodeElement', '<feMergeNode>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/fespecularlighting/index.md b/files/fr/web/svg/element/fespecularlighting/index.md index 017f6ca8c1..0705102ae5 100644 --- a/files/fr/web/svg/element/fespecularlighting/index.md +++ b/files/fr/web/svg/element/fespecularlighting/index.md @@ -45,15 +45,15 @@ Cet élément implémente l'interface {{domxref("SVGFESpecularLightingElement")} ```html <svg height="200" width="200" viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> - <filter id = "filter"> -   <feSpecularLighting result="specOut" - specularExponent="20" lighting-color="#bbbbbb"> -     <fePointLight x="50" y="75" z="200"/> -   </feSpecularLighting> -   <feComposite in="SourceGraphic" in2="specOut" + <filter id = "filter"> + <feSpecularLighting result="specOut" + specularExponent= + <fePointLight x="50 + </feSpecularLighting> + <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> - </filter> - <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/> + </filter> + <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/> </svg> ``` diff --git a/files/fr/web/svg/element/fetile/index.md b/files/fr/web/svg/element/fetile/index.md index 91e0f2b32b..5f366d23c7 100644 --- a/files/fr/web/svg/element/fetile/index.md +++ b/files/fr/web/svg/element/fetile/index.md @@ -9,7 +9,7 @@ translation_of: Web/SVG/Element/feTile --- {{SVGRef}} -La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feTile>`** permet de remplir un rectangle cible avec un motif en mosaïque qui répète une image en entrée. L'effet est similaire à ce que l'on obtient avec {{SVGElement("pattern")}}. +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feTile>`** permet de remplir un rectangle cible avec un motif en mosaïque qui répète une image en entrée. L'effet est similaire à ce que l'on obtient avec {{SVGElement("pattern")}}. ## Contexte d'utilisation diff --git a/files/fr/web/svg/element/filter/index.md b/files/fr/web/svg/element/filter/index.md index 057f4f1e2f..8ca9abeb33 100644 --- a/files/fr/web/svg/element/filter/index.md +++ b/files/fr/web/svg/element/filter/index.md @@ -8,7 +8,7 @@ translation_of: Web/SVG/Element/filter --- {{SVGRef}} -L'élément [SVG](/fr/docs/Web/SVG) **`<filter>`** sert de conteneur pour définir des opérations de filtre. Il n'est jamais affiché par lui-même, il est référencé en utilisant l'attribut {{SVGAttr("filter")}} sur un élément SVG ou via la propriété {{Glossary("CSS")}} {{cssxref("filter")}}. +L'élément [SVG](/fr/docs/Web/SVG) **`<filter>`** sert de conteneur pour définir des opérations de filtre. Il n'est jamais affiché par lui-même, il est référencé en utilisant l'attribut {{SVGAttr("filter")}} sur un élément SVG ou via la propriété {{Glossary("CSS")}} {{cssxref("filter")}}. ## Contexte d'utilisation @@ -68,7 +68,7 @@ Cet élément implémente l'interface {{domxref("SVGFilterElement")}}. | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("Filters 1.0", "#FilterElement", "<filter>")}} | {{Spec2("Filters 1.0")}} |  | +| {{SpecName("Filters 1.0", "#FilterElement", "<filter>")}} | {{Spec2("Filters 1.0")}} | | | {{SpecName("SVG1.1", "filters.html#FilterElement", "<filter>")}} | {{Spec2("SVG1.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/foreignobject/index.md b/files/fr/web/svg/element/foreignobject/index.md index f8fd0abdb3..9475ba5ad3 100644 --- a/files/fr/web/svg/element/foreignobject/index.md +++ b/files/fr/web/svg/element/foreignobject/index.md @@ -90,7 +90,7 @@ html,body,svg { height:100% } | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}} | {{Spec2('SVG2')}} |  | +| {{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/g/index.md b/files/fr/web/svg/element/g/index.md index 36c51f798f..3ef07cf2e5 100644 --- a/files/fr/web/svg/element/g/index.md +++ b/files/fr/web/svg/element/g/index.md @@ -10,9 +10,9 @@ translation_of: Web/SVG/Element/g --- {{SVGRef}} -L'élément `g` est un conteneur utilisé pour grouper des objets. +L'élément `g` est un conteneur utilisé pour grouper des objets. -Les transformations appliquées à l'élément `g` sont reportées à tous ses éléments enfants. Les attributs appliqués sont également reportés aux éléments enfants. De plus, il peut être utilisé pour définir des objets complexes qui seront référencés ultérieurement avec l'élément {{SVGElement("use")}}. +Les transformations appliquées à l'élément `g` sont reportées à tous ses éléments enfants. Les attributs appliqués sont également reportés aux éléments enfants. De plus, il peut être utilisé pour définir des objets complexes qui seront référencés ultérieurement avec l'élément {{SVGElement("use")}}. ## Exemple @@ -59,7 +59,7 @@ Cet élément n'a que des attributs globaux | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------- | ------------------------ | ------------------ | -| {{SpecName("SVG2", "struct.html#GElement", "<g>")}} | {{Spec2("SVG2")}} |  | +| {{SpecName("SVG2", "struct.html#GElement", "<g>")}} | {{Spec2("SVG2")}} | | | {{SpecName("SVG1.1", "struct.html#Groups", "<g>")}} | {{Spec2("SVG1.1")}} | Initial definition | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/line/index.md b/files/fr/web/svg/element/line/index.md index 93360395cf..7119f086c9 100644 --- a/files/fr/web/svg/element/line/index.md +++ b/files/fr/web/svg/element/line/index.md @@ -39,13 +39,13 @@ html,body,svg { height:100% } ### Attributs globaux -- [Attributs conditionnels](/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel "en/SVG/Attribute#ConditionalProccessing") ; -- [Attributs centraux](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") ; -- [Attributs d'événements graphiques](/fr/docs/Web/SVG/Attribute#Attributs_d'.C3.A9v.C3.A9nement_graphique "en/SVG/Attribute#GraphicalEvent") ; +- [Attributs conditionnels](/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel "en/SVG/Attribute#ConditionalProccessing") ; +- [Attributs centraux](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") ; +- [Attributs d'événements graphiques](/fr/docs/Web/SVG/Attribute#Attributs_d'.C3.A9v.C3.A9nement_graphique "en/SVG/Attribute#GraphicalEvent") ; - [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation "en/SVG/Attribute#Presentation") ; -- {{ SVGAttr("class") }} ; -- {{ SVGAttr("style") }} ; -- {{ SVGAttr("externalResourcesRequired") }} ; +- {{ SVGAttr("class") }} ; +- {{ SVGAttr("style") }} ; +- {{ SVGAttr("externalResourcesRequired") }} ; - {{ SVGAttr("transform") }}. ### Attributs spécifiques @@ -65,5 +65,5 @@ Cet élément implémente l'interface [`SVGLineElement`](/fr/DOM/SVGLineElement ## Voir aussi -- {{ SVGElement("polygon") }} ; +- {{ SVGElement("polygon") }} ; - {{ SVGElement("path") }}. diff --git a/files/fr/web/svg/element/lineargradient/index.md b/files/fr/web/svg/element/lineargradient/index.md index 1d3fe8a442..14c117b7ec 100644 --- a/files/fr/web/svg/element/lineargradient/index.md +++ b/files/fr/web/svg/element/lineargradient/index.md @@ -64,7 +64,7 @@ Cet élément implémente l'interface {{domxref("SVGLinearGradientElement")}}. | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}} | {{Spec2('SVG2')}} |  | +| {{SpecName('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'pservers.html#LinearGradients', '<linearGradient>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/marker/index.md b/files/fr/web/svg/element/marker/index.md index edd0f179ac..41bc74cdbd 100644 --- a/files/fr/web/svg/element/marker/index.md +++ b/files/fr/web/svg/element/marker/index.md @@ -20,28 +20,28 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <defs> + <defs> <!-- Définit une pointe de flèche --> -   <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" -       markerWidth="6" markerHeight="6" - orient="auto-start-reverse"> -     <path d="M 0 0 L 10 5 L 0 10 z" /> -   </marker> + <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" + markerWidth="6" markerHeight="6" + tart-reverse"> + <path d="M 0 0 L 10 5 L 0 10 z" /> + </marker> <!-- Définit un simple point --> -   <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" -     markerWidth="5" markerHeight="5"> -     <circle cx="5" cy="5" r="5" fill="red" /> -   </marker> - </defs> + <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" + markerWidth="5" markerHeight="5"> + <circle cx="5" cy="5" r="5" fill="red" /> + </marker> + </defs> <!-- Dessine les axes des coordonnées avec des pointes de flèche à chaque bout --> - <polyline points="10,10 10,90 90,90" fill="none" stroke="black" - marker-start="url(#arrow)" marker-end="url(#arrow)" /> + <polyline points="10,10 10,90 90,90" fill="none" stroke="black" + marker-start="url(#arrow)" marker-end="url(#arrow)" /> <!-- Dessine une ligne avec un simple point entre chaque segment --> - <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" - marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> + <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" + marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> </svg> ``` @@ -54,7 +54,7 @@ html,body,svg { height:100% } _Valeur_: **[\<length>](/docs/Web/SVG/Content_type#Length)** ; _Valeur par défaut_: `3`; _Animation_: **oui** - {{SVGAttr("markerUnits")}} - : Définit le système de coordnnées pour les attributs `markerWidth`, `markerHeight` et le contenu du `<marker>`. - _Valeur_: `userSpaceOnUse`|`strokeWidth` ; _Valeur par défaut_: `strokeWidth`; _Animation_: **oui** + _Valeur_: `userSpaceOnUse`|`strokeWidth` ; _Valeur par défaut_: `strokeWidth`; _Animation_: **oui** - {{SVGAttr("markerWidth")}} - : Définit la largeur du viewport du marqueur. _Valeur_: **[\<length>](/docs/Web/SVG/Content_type#Length)** ; _Valeur par défaut_: `3`; _Animation_: **oui** @@ -95,8 +95,8 @@ html,body,svg { height:100% } | Sp"cification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("SVG Markers", "#MarkerElement", "<marker>")}} | {{Spec2("SVG Markers")}} |  | -| {{SpecName("SVG2", "painting.html#MarkerElement", "<marker>")}} | {{Spec2("SVG2")}} |  | +| {{SpecName("SVG Markers", "#MarkerElement", "<marker>")}} | {{Spec2("SVG Markers")}} | | +| {{SpecName("SVG2", "painting.html#MarkerElement", "<marker>")}} | {{Spec2("SVG2")}} | | | {{SpecName("SVG1.1", "painting.html#MarkerElement", "<marker>")}} | {{Spec2("SVG1.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/mask/index.md b/files/fr/web/svg/element/mask/index.md index a7f89505b7..2ed9488e23 100644 --- a/files/fr/web/svg/element/mask/index.md +++ b/files/fr/web/svg/element/mask/index.md @@ -11,7 +11,7 @@ translation_of: Web/SVG/Element/mask --- {{SVGRef}} -L'élément **`<mask>`** définit un masque alpha. Ce masque peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("mask")}}. +L'élément **`<mask>`** définit un masque alpha. Ce masque peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("mask")}}. Le masque permet de rendre des zones de l'élément sur lequel est appliqué (semi-)transparentes. On peut par exemple créer un effet de fondu en utilisant un dégradé, ce que le détourage ({{SVGElement('clipPath')}}) ne permet pas. @@ -80,7 +80,7 @@ html,body,svg { height:100% } | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | -| {{SpecName('CSS Masks', '#MaskElement', '<mask>')}} | {{Spec2('CSS Masks')}} |  | +| {{SpecName('CSS Masks', '#MaskElement', '<mask>')}} | {{Spec2('CSS Masks')}} | | | {{SpecName('SVG1.1', 'masking.html#Masking', '<mask>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/metadata/index.md b/files/fr/web/svg/element/metadata/index.md index 329fcc2a5c..f39b3c23e0 100644 --- a/files/fr/web/svg/element/metadata/index.md +++ b/files/fr/web/svg/element/metadata/index.md @@ -9,7 +9,7 @@ translation_of: Web/SVG/Element/metadata --- {{SVGRef}} -L'élément [SVG](/fr/docs/Web/SVG) **`<metadata>`** permet d'ajouter des metadonnées au contenu SVG. Des metadonnées sont des données structurées qui donnent des informations sur le contenu du document. La balise `<metadata>` doit contenir des éléments d'un autre {{Glossary("namespace", "namespaces")}} {{Glossary("XML")}} tel que {{Glossary("RDF")}}, [FOAF](https://fr.wikipedia.org/wiki/FOAF), etc. +L'élément [SVG](/fr/docs/Web/SVG) **`<metadata>`** permet d'ajouter des metadonnées au contenu SVG. Des metadonnées sont des données structurées qui donnent des informations sur le contenu du document. La balise `<metadata>` doit contenir des éléments d'un autre {{Glossary("namespace", "namespaces")}} {{Glossary("XML")}} tel que {{Glossary("RDF")}}, [FOAF](https://fr.wikipedia.org/wiki/FOAF), etc. ## Contexte d'utilisation diff --git a/files/fr/web/svg/element/polyline/index.md b/files/fr/web/svg/element/polyline/index.md index a8052c0607..626417837b 100644 --- a/files/fr/web/svg/element/polyline/index.md +++ b/files/fr/web/svg/element/polyline/index.md @@ -98,7 +98,7 @@ Cet élément implémente l'interface {{domxref("SVGPolylineElement")}}. | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ------------------------ | -------------------- | -| {{SpecName('SVG2', 'shapes.html#PolylineElement', '<polyline>')}} | {{Spec2('SVG2')}} |  | +| {{SpecName('SVG2', 'shapes.html#PolylineElement', '<polyline>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'shapes.html#PolylineElement', '<polyline>')}} | {{Spec2('SVG1.1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/radialgradient/index.md b/files/fr/web/svg/element/radialgradient/index.md index baae55eed4..e1ba1e6965 100644 --- a/files/fr/web/svg/element/radialgradient/index.md +++ b/files/fr/web/svg/element/radialgradient/index.md @@ -39,7 +39,7 @@ L'élément [SVG](/fr/docs/Web/SVG) **`<radialGradient>`** permet de définir un - {{SVGAttr("spreadMethod")}} - {{SVGAttr("xlink:href")}} -## DOM Interface +## DOM Interface Cet élément implémente l'interface {{domxref("SVGRadialGradientElement")}}. diff --git a/files/fr/web/svg/element/rect/index.md b/files/fr/web/svg/element/rect/index.md index 99f8d22bcd..2372a4932d 100644 --- a/files/fr/web/svg/element/rect/index.md +++ b/files/fr/web/svg/element/rect/index.md @@ -9,7 +9,7 @@ translation_of: Web/SVG/Element/rect --- {{SVGRef}}{{Draft("Cette version n'est pas à jour relativement à la version anglaise de référence, merci d'en tenir compte.")}} -L'élément `rect` est un élément de Formes basiques, utilisé pour dessiner des rectangles à partir de la position d'un angle, de largeur et de la hauteur. Il peut aussi être utilisé avec des arrondis. +L'élément `rect` est un élément de Formes basiques, utilisé pour dessiner des rectangles à partir de la position d'un angle, de largeur et de la hauteur. Il peut aussi être utilisé avec des arrondis. ## Usage diff --git a/files/fr/web/svg/element/stop/index.md b/files/fr/web/svg/element/stop/index.md index 1cfbc01ce9..dad0fe1946 100644 --- a/files/fr/web/svg/element/stop/index.md +++ b/files/fr/web/svg/element/stop/index.md @@ -5,7 +5,7 @@ translation_of: Web/SVG/Element/stop --- {{SVGRef}} -L'élément [SVG](/fr/docs/Web/SVG) **`<stop>`** définit une couleur supplémentaire dans une palette à  utiliser pour un dégradé, et est contenu dans un élément {{SVGElement("linearGradient")}} ou {{SVGElement("radialGradient")}}. +L'élément [SVG](/fr/docs/Web/SVG) **`<stop>`** définit une couleur supplémentaire dans une palette à utiliser pour un dégradé, et est contenu dans un élément {{SVGElement("linearGradient")}} ou {{SVGElement("radialGradient")}}. ## Contexte d'utilisation @@ -26,7 +26,7 @@ L'élément [SVG](/fr/docs/Web/SVG) **`<stop>`** définit une couleur suppléme - {{SVGAttr("stop-color")}} - {{SVGAttr("stop-opacity")}} -## DOM Interface +## DOM Interface Cet élément implémenté l'interface {{domxref("SVGStopElement")}}. @@ -63,7 +63,7 @@ Cet élément implémenté l'interface {{domxref("SVGStopElement")}}. | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'pservers.html#GradientStops', '<stop>')}} | {{Spec2('SVG2')}} |  | +| {{SpecName('SVG2', 'pservers.html#GradientStops', '<stop>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'pservers.html#GradientStops', '<stop>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/style/index.md b/files/fr/web/svg/element/style/index.md index a106119925..f1ff62683c 100644 --- a/files/fr/web/svg/element/style/index.md +++ b/files/fr/web/svg/element/style/index.md @@ -42,7 +42,7 @@ Résultat en direct: ### Attributs Globaux -- [Core attributes](/fr/SVG/Attribute#Core) » +- [Core attributes](/fr/SVG/Attribute#Core) » ### Attributs Specifiques @@ -58,7 +58,7 @@ Cet élément implemente l'interface [`SVGStyleElement`](/fr/DOM/SVGStyleElement | Specification | Status | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------ | ------------------ | -| {{SpecName('SVG2', 'styling.html#StyleElement', '<style>')}} | {{Spec2('SVG2')}} |  | +| {{SpecName('SVG2', 'styling.html#StyleElement', '<style>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'styling.html#StyleElement', '<style>')}} | {{Spec2('SVG1.1')}} | Initial definition | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/svg/index.md b/files/fr/web/svg/element/svg/index.md index b4c88d63f3..f24f6d9b7b 100644 --- a/files/fr/web/svg/element/svg/index.md +++ b/files/fr/web/svg/element/svg/index.md @@ -5,7 +5,7 @@ translation_of: Web/SVG/Element/svg --- {{SVGRef}} -L'élément `svg` peut être utilisé pour intégrer des fragments de code SVG à l'intérieur d'un document (par exemple, un document HTML). Ce fragment de code SVG dispose de ses propres [viewport](/fr/docs/) et système de coordonnée. +L'élément `svg` peut être utilisé pour intégrer des fragments de code SVG à l'intérieur d'un document (par exemple, un document HTML). Ce fragment de code SVG dispose de ses propres [viewport](/fr/docs/) et système de coordonnée. ## Contexte d'utilisation @@ -75,13 +75,13 @@ Ce fichier peut être inclus dans un document HTML5 de cette façon : ## Interface DOM -Cette élément implémente l'interface [`SVGSVGElement`](/fr/docs/Web/API/SVGSVGElement). +Cette élément implémente l'interface [`SVGSVGElement`](/fr/docs/Web/API/SVGSVGElement). ## Spécifications | Spécification | Status | Commentaires | | ------------------------------------------------------------------------------------ | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}} | {{Spec2('SVG2')}} |  | +| {{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/switch/index.md b/files/fr/web/svg/element/switch/index.md index dc44f26695..6881d631ab 100644 --- a/files/fr/web/svg/element/switch/index.md +++ b/files/fr/web/svg/element/switch/index.md @@ -9,9 +9,9 @@ translation_of: Web/SVG/Element/switch --- {{SVGRef}} -L'élément `switch` évalue les attributs {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("requiredExtensions") }} et {{ SVGAttr("systemLanguage") }} de ses éléments enfants directs, dans l'ordre, puis affiche le premier élément pour lequel les attributs renvoient `true`. Tous les autres seront ignorés et donc non affichés. Si l'élément enfant est un élément conteneur tel que {{ SVGElement("g") }}, alors l'intégralité du contenu de cet enfant est soit traité/rendu soit ignoré/non rendu. +L'élément `switch` évalue les attributs {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("requiredExtensions") }} et {{ SVGAttr("systemLanguage") }} de ses éléments enfants directs, dans l'ordre, puis affiche le premier élément pour lequel les attributs renvoient `true`. Tous les autres seront ignorés et donc non affichés. Si l'élément enfant est un élément conteneur tel que {{ SVGElement("g") }}, alors l'intégralité du contenu de cet enfant est soit traité/rendu soit ignoré/non rendu. -Notez que la valeur des propriétés `display` et `visibility` n'ont aucun effet sur le traitement du `switch`. En particulier, appliquer une propriété `display` à `none` sur l'élément enfant d'un `switch` n'a aucun effet sur le résultat du test `true/false` associé au traitement des éléments par le `switch`. +Notez que la valeur des propriétés `display` et `visibility` n'ont aucun effet sur le traitement du `switch`. En particulier, appliquer une propriété `display` à `none` sur l'élément enfant d'un `switch` n'a aucun effet sur le résultat du test `true/false` associé au traitement des éléments par le `switch`. ## Contexte d'utilisation diff --git a/files/fr/web/svg/element/symbol/index.md b/files/fr/web/svg/element/symbol/index.md index 58a230af5f..f777e55bf6 100644 --- a/files/fr/web/svg/element/symbol/index.md +++ b/files/fr/web/svg/element/symbol/index.md @@ -21,20 +21,20 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <!-- Notre symbol a son propre système de coordonnées --> - <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2"> -   <circle cx="1" cy="1" r="1" /> - </symbol> - -  <!-- Une grille pour matérialiser le positionnement du symbole --> - <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" /> - - <!-- Multiples instances de notre symbole --> - <use xlink:href="#myDot" x="5" y="5" style="opacity:1.0" /> - <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" /> - <use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" /> - <use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" /> - <use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" /> + <!-- Notre symbol a son propre système de coordonnées --> + <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2"> + <circle cx="1" cy="1" r="1" /> + </symbol> + + <!-- Une grille pour matérialiser le positionnement du symbole --> + <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" /> + + <!-- Multiples instances de notre symbole --> + <use xlink:href="#myDot" x="5" y="5" style="opacity:1.0" /> + <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" /> + <use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" /> + <use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" /> + <use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" /> </svg> ``` diff --git a/files/fr/web/svg/element/text/index.md b/files/fr/web/svg/element/text/index.md index dafd76e9fe..e2a2054e1f 100644 --- a/files/fr/web/svg/element/text/index.md +++ b/files/fr/web/svg/element/text/index.md @@ -10,7 +10,7 @@ translation_of: Web/SVG/Element/text --- {{SVGRef}}{{Draft("Cette version n'est pas à jour relativement à la version anglaise de référence, merci d'en tenir compte.")}} -L'élément SVG `text` définit un élément graphique contenant du texte. Notez  qu'il est possible d'y appliquer un dégradé, un motif, un tracé spécifique (clipping path), un masque ou un filtre. +L'élément SVG `text` définit un élément graphique contenant du texte. Notez qu'il est possible d'y appliquer un dégradé, un motif, un tracé spécifique (clipping path), un masque ou un filtre. Si du texte est écrit dans le SVG sans être intégré dans un balise \<text>, il ne sera pas affiché. Le texte n'est pas _caché_ par défaut, la propriété display ne le montre simplement pas. @@ -45,11 +45,11 @@ L'élément \<text> est utilisé pour dessiner des caractères de texte. L'exemp </svg> ``` -Le texte en SVG peut être pivoté. L'exemple de code suivant démontre la rotation de texte à l'aide de l'attribut transform. +Le texte en SVG peut être pivoté. L'exemple de code suivant démontre la rotation de texte à l'aide de l'attribut transform. ```xml <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> - <text x="10" y="20" + <text x="10" y="20" transform="rotate(30 20,40)"> SVG Text Rotation example </text> @@ -60,11 +60,11 @@ Le texte SVG peut également être stylisé avec du CSS contenant les propriétà ```xml <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> - <text x="10" y="20" -       style="font-family: Times New Roman; -            font-size : 24; -              stroke    : #00ff00; -            fill      : #0000ff;"> + <text x="10" y="20" + style="font-family: Times New Roman; + font-size : 24; + stroke : #00ff00; + fill : #0000ff;"> SVG text styling </text> </svg> @@ -74,10 +74,10 @@ Le texte SVG peut également être stylisé avec du CSS contenant les propriétà ### Attributs globaux -- [Conditional processing attributes](/fr/SVG/Attribute#ConditionalProccessing "en/SVG/Attribute#ConditionalProccessing") » -- [Core attributes](/fr/SVG/Attribute#Core "en/SVG/Attribute#Core") » -- [Graphical event attributes](/fr/SVG/Attribute#GraphicalEvent "en/SVG/Attribute#GraphicalEvent") » -- [Presentation attributes](/fr/SVG/Attribute#Presentation "en/SVG/Attribute#Presentation") » +- [Conditional processing attributes](/fr/SVG/Attribute#ConditionalProccessing "en/SVG/Attribute#ConditionalProccessing") » +- [Core attributes](/fr/SVG/Attribute#Core "en/SVG/Attribute#Core") » +- [Graphical event attributes](/fr/SVG/Attribute#GraphicalEvent "en/SVG/Attribute#GraphicalEvent") » +- [Presentation attributes](/fr/SVG/Attribute#Presentation "en/SVG/Attribute#Presentation") » - {{ SVGAttr("class") }} - {{ SVGAttr("style") }} - {{ SVGAttr("externalResourcesRequired") }} @@ -96,7 +96,7 @@ Le texte SVG peut également être stylisé avec du CSS contenant les propriétà ## Interface DOM -Cet élément implémente l'interface [`SVGTextElement`](/fr/DOM/SVGTextElement "en/DOM/SVGTextElement"). +Cet élément implémente l'interface [`SVGTextElement`](/fr/DOM/SVGTextElement "en/DOM/SVGTextElement"). ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/title/index.md b/files/fr/web/svg/element/title/index.md index 8c1cafbe4c..0c98749647 100644 --- a/files/fr/web/svg/element/title/index.md +++ b/files/fr/web/svg/element/title/index.md @@ -24,7 +24,7 @@ L'élément `<title>` est souvent le premier enfant de son parent. Notons que le ### Attributs globaux -- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") » +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") » - {{ SVGAttr("class") }} - {{ SVGAttr("style") }} @@ -32,9 +32,9 @@ L'élément `<title>` est souvent le premier enfant de son parent. Notons que le _(Aucun)_ -## Interface DOM +## Interface DOM -Cet élément implémente l'interface [`SVGTitleElement`](/fr/docs/Web/API/SVGTitleElement "en/DOM/SVGTitleElement"). +Cet élément implémente l'interface [`SVGTitleElement`](/fr/docs/Web/API/SVGTitleElement "en/DOM/SVGTitleElement"). ## Exemple @@ -52,7 +52,7 @@ Cet élément implémente l'interface [`SVGTitleElement`](/fr/docs/Web/API/SVGT | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'struct.html#TitleElement', '<title>')}} | {{Spec2('SVG2')}} |  | +| {{SpecName('SVG2', 'struct.html#TitleElement', '<title>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'struct.html#DescriptionAndTitleElements', '<title>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/tspan/index.md b/files/fr/web/svg/element/tspan/index.md index 074d07a4fa..c35bb8fc6c 100644 --- a/files/fr/web/svg/element/tspan/index.md +++ b/files/fr/web/svg/element/tspan/index.md @@ -69,7 +69,7 @@ Cet élément implémente l'interface [`SVGTSpanElement`](/fr/docs/Web/API/SVGTS | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------ | -------------------- | -| {{SpecName('SVG2', 'text.html#TextElement', '<tspan>')}} | {{Spec2('SVG2')}} |  | +| {{SpecName('SVG2', 'text.html#TextElement', '<tspan>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'text.html#TSpanElement', '<tspan>')}} | {{Spec2('SVG1.1')}} | Définition originale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/use/index.md b/files/fr/web/svg/element/use/index.md index 6c3e975de4..6bafb70269 100644 --- a/files/fr/web/svg/element/use/index.md +++ b/files/fr/web/svg/element/use/index.md @@ -5,13 +5,13 @@ translation_of: Web/SVG/Element/use --- {{SVGRef}} -L'élement **`<use>`** permet la duplication de _nodes_ (noeuds du DOM, NDR) définis par [\<defs>](/fr/docs/Web/SVG/Element/defs) afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés" là où est utilisé l'élément `use` tel que le permet les [éléments de gabarit](/fr/docs/Web/HTML/Element/template) grâce à HTML5. +L'élement **`<use>`** permet la duplication de _nodes_ (noeuds du DOM, NDR) définis par [\<defs>](/fr/docs/Web/SVG/Element/defs) afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés" là où est utilisé l'élément `use` tel que le permet les [éléments de gabarit](/fr/docs/Web/HTML/Element/template) grâce à HTML5. Puisque les noeuds clonés par `use` ne sont pas exposés, vous devez être attentif lorsque vous utilisez des règles de style [CSS](/fr/docs/Web/CSS "en/CSS") sur l'élément `use` et ses enfants "cachés". En effet les attributs CSS ne sont pas garantis d'être hérités lorsqu'ils seront clonés si vous n'explicitez pas correctement les [héritages CSS](/fr/docs/Web/CSS/inheritance "en/CSS/inheritance"). Pour des raisons de sécurité, certains navigateurs peuvent appliquer la politique de _même-origine_ (c'est-à -dire le couple domaine et port identiques) pour l'élément `use` ce qui peut conduire à un refus de charger une URI depuis une origine différente conernant l'attribut {{SVGAttr("href")}}. -> **Attention :** Depuis la version de SVG 2, l'attribut {{SVGAttr("xlink:href")}} est obsolète. Voir la page {{SVGAttr("xlink:href")}} pour plus d'informations. +> **Attention :** Depuis la version de SVG 2, l'attribut {{SVGAttr("xlink:href")}} est obsolète. Voir la page {{SVGAttr("xlink:href")}} pour plus d'informations. ## Contexte d'usage @@ -21,11 +21,11 @@ Pour des raisons de sécurité, certains navigateurs peuvent appliquer la politi ### Attributs globaux -- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#Conditional_processing_attributes "en/SVG/Attribute#ConditionalProccessing") » -- [Core attributes](/fr/docs/Web/SVG/Attribute#Core_attributes "en/SVG/Attribute#Core") » -- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#Graphical_event_attributes "en/SVG/Attribute#GraphicalEvent") » -- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation_attributes "en/SVG/Attribute#Presentation") » -- [Xlink attributes](/fr/docs/Web/SVG/Attribute#XLink_attributes "en/SVG/Attribute#XLink") » +- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#Conditional_processing_attributes "en/SVG/Attribute#ConditionalProccessing") » +- [Core attributes](/fr/docs/Web/SVG/Attribute#Core_attributes "en/SVG/Attribute#Core") » +- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#Graphical_event_attributes "en/SVG/Attribute#GraphicalEvent") » +- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation_attributes "en/SVG/Attribute#Presentation") » +- [Xlink attributes](/fr/docs/Web/SVG/Attribute#XLink_attributes "en/SVG/Attribute#XLink") » - {{SVGAttr("class")}} - {{SVGAttr("style")}} - {{SVGAttr("externalResourcesRequired")}} @@ -74,7 +74,7 @@ Cet élément est implanté par l'interface {{domxref("SVGUseElement")}}. | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ------------------------ | ------------------ | -| {{SpecName('SVG2', 'struct.html#UseElement', '<use>')}} | {{Spec2('SVG2')}} |  | +| {{SpecName('SVG2', 'struct.html#UseElement', '<use>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'struct.html#UseElement', '<use>')}} | {{Spec2('SVG1.1')}} | Initial definition | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/index.md b/files/fr/web/svg/index.md index c153279ae1..903ccf1bcb 100644 --- a/files/fr/web/svg/index.md +++ b/files/fr/web/svg/index.md @@ -20,7 +20,7 @@ translation_of: Web/SVG **[Premiers pas](/fr/SVG/Tutoriel "fr/SVG/Tutoriel")** ce tutoriel vous aidera à débuter en SVG. -SVG est une [recommandation du W3C](http://www.w3.org/Graphics/SVG/) et est basé sur XML. Il est explicitement conçu pour fonctionner avec d'autres standards du [W3C](http://www.w3.org/) comme [CSS](/fr/CSS "fr/CSS"), [DOM](/fr/DOM "fr/DOM") et [SMIL](http://www.w3.org/AudioVideo/). +SVG est une [recommandation du W3C](http://www.w3.org/Graphics/SVG/) et est basé sur XML. Il est explicitement conçu pour fonctionner avec d'autres standards du [W3C](http://www.w3.org/) comme [CSS](/fr/CSS "fr/CSS"), [DOM](/fr/DOM "fr/DOM") et [SMIL](http://www.w3.org/AudioVideo/). SVG est un format d'images vectorielles. Les images vectorielles peuvent être redimensionnées sans perte de qualité, tandis que ce n'est pas possible avec des images matricielles (bitmap). @@ -46,7 +46,7 @@ SVG est une norme développée par le [World Wide Web Consortium (W3C)](https:// - : Cette FAQ est le résultat de recherches au sein du groupe mozilla.dev.tech.svg et des forums de MozillaZine pour connaître les questions les plus souvent posées à propos de SVG dans Mozilla. - Autres ressources - - : Voici d'autres articles à propos de SVG sur MDN : + - : Voici d'autres articles à propos de SVG sur MDN : - [Un tutoriel](/fr/docs/Web/SVG/Tutoriel "/fr/docs/Web/SVG/Tutoriel") - [Une introduction à SVG dans HTML](/fr/docs/Introduction_à _SVG_dans_HTML "/fr/docs/Introduction_à _SVG_dans_HTML") diff --git a/files/fr/web/svg/svg_animation_with_smil/index.md b/files/fr/web/svg/svg_animation_with_smil/index.md index a92f81cae3..fb2ca624bd 100644 --- a/files/fr/web/svg/svg_animation_with_smil/index.md +++ b/files/fr/web/svg/svg_animation_with_smil/index.md @@ -24,7 +24,7 @@ Pour ce faire, on utilise un élément SVG tel que {{ SVGElement("animate") }}. ## Animation pour un attribut -L'exemple suivant anime l'attribut **`cx`** d'un cercle. Pour ce faire, on ajoute un élément {{ SVGElement("animate") }} dans l'élément {{ SVGElement("circle") }}. Les attributs importants pour {{ SVGElement("animate") }} sont : +L'exemple suivant anime l'attribut **`cx`** d'un cercle. Pour ce faire, on ajoute un élément {{ SVGElement("animate") }} dans l'élément {{ SVGElement("circle") }}. Les attributs importants pour {{ SVGElement("animate") }} sont : - **`attributeName`** - : Le nom de l'attribut à animer. @@ -122,5 +122,5 @@ Le même exemple que précédemment mais avec une trajectoire courbe. ## Voir aussi - [SVG](/fr/SVG "en/SVG") -- [SVG Animation Specification](http://www.w3.org/TR/SVG/animate.html) -- [SMIL Specification](http://www.w3.org/TR/REC-smil) +- [SVG Animation Specification](http://www.w3.org/TR/SVG/animate.html) +- [SMIL Specification](http://www.w3.org/TR/REC-smil) diff --git a/files/fr/web/svg/svg_as_an_image/index.md b/files/fr/web/svg/svg_as_an_image/index.md index 52b40872b0..f46ae7df9f 100644 --- a/files/fr/web/svg/svg_as_an_image/index.md +++ b/files/fr/web/svg/svg_as_an_image/index.md @@ -30,10 +30,10 @@ Pour plusieurs raisons, Gecko fixe quelques restrictions sur le format SVG lorsq - [JavaScript](/fr/docs/Web/JavaScript "JavaScript") est désactivé. - Les ressources externes (p. ex. images, stylesheets) ne peuvent pas être chargées, cependant elles peuvent être utilisées en étant déclaré à travers des URLs de données. -- Les liens stylistiques {{cssxref(":visited")}} ne sont pas interprété. +- Les liens stylistiques {{cssxref(":visited")}} ne sont pas interprété. - Les widgets stylistiques natifs aux plateformes (basés sur le thème de l'OS) sont désactivés. -A noter que les restrictions précédentes sont spécifiques à l'usage de SVG en tant qu'image; elles ne s'appliquent pas lorsque le contenu SVG est vu directement, ou lorsque il est embarqué en tant que document via les éléments {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, ou {{HTMLElement("embed")}} +A noter que les restrictions précédentes sont spécifiques à l'usage de SVG en tant qu'image; elles ne s'appliquent pas lorsque le contenu SVG est vu directement, ou lorsque il est embarqué en tant que document via les éléments {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, ou {{HTMLElement("embed")}} ## Spécifications diff --git a/files/fr/web/svg/tutorial/basic_transformations/index.md b/files/fr/web/svg/tutorial/basic_transformations/index.md index de9f5fa712..ae936d5c72 100644 --- a/files/fr/web/svg/tutorial/basic_transformations/index.md +++ b/files/fr/web/svg/tutorial/basic_transformations/index.md @@ -53,7 +53,7 @@ Appliquer une rotation à un élément est assez simple : il suffit d'utiliser l </svg> ``` -Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés. +Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés. {{ EmbedLiveSample('Rotation', '31', '31') }} diff --git a/files/fr/web/svg/tutorial/clipping_and_masking/index.md b/files/fr/web/svg/tutorial/clipping_and_masking/index.md index 905c2c5eaf..00dd9920c5 100644 --- a/files/fr/web/svg/tutorial/clipping_and_masking/index.md +++ b/files/fr/web/svg/tutorial/clipping_and_masking/index.md @@ -9,7 +9,7 @@ original_slug: Web/SVG/Tutoriel/Découpages_et_masquages --- {{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }} -Effacer une partie de ce que l'on a créé précédemment peut paraître maladroit, voire totalement contradictoire. Mais cela peut se révéler très utile, par exemple quand vous essayez de dessiner un demi-cercle. +Effacer une partie de ce que l'on a créé précédemment peut paraître maladroit, voire totalement contradictoire. Mais cela peut se révéler très utile, par exemple quand vous essayez de dessiner un demi-cercle. Le **découpage** (_clipping_) correspond au fait d'enlever des morceaux d'élément. Dans ce cas là , les effets de transparence ne sont pas permis, il s'agit d'une approche du tout-ou-rien. diff --git a/files/fr/web/svg/tutorial/gradients/index.md b/files/fr/web/svg/tutorial/gradients/index.md index c1159e92aa..662d5036bb 100644 --- a/files/fr/web/svg/tutorial/gradients/index.md +++ b/files/fr/web/svg/tutorial/gradients/index.md @@ -159,39 +159,39 @@ Cet attribut contrôle ce qu'il arrive quand le dégradé arrive à sa fin, mais ```html <svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"> - <defs> -     <!-- pad --> -     <radialGradient id="GradientPad" -           cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" -           spreadMethod="pad"> -       <stop offset="0%" stop-color="red"/> -       <stop offset="100%" stop-color="blue"/> -     </radialGradient> - -     <!-- repeat --> -     <radialGradient id="GradientRepeat" -           cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" -           spreadMethod="repeat"> -       <stop offset="0%" stop-color="red"/> -       <stop offset="100%" stop-color="blue"/> -     </radialGradient> - -     <!-- reflect --> -     <radialGradient id="GradientReflect" -           cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" -           spreadMethod="reflect"> -       <stop offset="0%" stop-color="red"/> -       <stop offset="100%" stop-color="blue"/> -     </radialGradient> - </defs> - - <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/> - <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/> - <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/> - - <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text> - <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text> - <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text> + <defs> + <!-- pad --> + <radialGradient id="GradientPad" + cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" + spreadMethod="pad"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + + <!-- repeat --> + <radialGradient id="Gradient + cx="0.5" cy= + spreadMethod + <stop offset="0% + <stop offset="10 + </radialGradient + + <!-- reflect --> + <radialGradient id="GradientR + cx="0.5" cy="0.5" r="0.4" fx="0. + spreadMethod="reflect"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/> + <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/> + + <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text> + <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text> + <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text> </svg> ``` diff --git a/files/fr/web/svg/tutorial/introduction/index.md b/files/fr/web/svg/tutorial/introduction/index.md index 35d706917c..dec87d20bd 100644 --- a/files/fr/web/svg/tutorial/introduction/index.md +++ b/files/fr/web/svg/tutorial/introduction/index.md @@ -13,7 +13,7 @@ SVG est un langage [XML](/fr/XML "XML"), assez similaire au [XHTML](/fr/XHTML "f La seconde particularité est que vous allez pouvoir lire le code. Stop ! Lire une image ? Et oui, cela vient du fait que SVG dérive du XML. Nous verrons dans ce tutoriel que le code SVG reste (la plupart du temps) humainement lisible. C'est aussi sympa car on va pouvoir le transformer en arbre DOM et ainsi le manipuler, avec du CSS et / ou du Javascript. -SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au [W3C](http://www.w3.org "en-US/W3C") sans succès. SVG est pris en charge par tous les [principaux navigateurs](https://caniuse.com/#search=svg). Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation. +SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au [W3C](http://www.w3.org "en-US/W3C") sans succès. SVG est pris en charge par tous les [principaux navigateurs](https://caniuse.com/#search=svg). Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation. ## Les ingrédients de base @@ -29,7 +29,7 @@ Il y a un certain nombre de logiciels de dessin disponibles qui utilisent SVG co > **Note :** Tous les visionneurs SVG ne sont pas égaux, il est donc probable que quelque chose écrit pour une application ne s'affiche pas exctement de la même manière dans une autre, simplement parce qu'ils prennent en charge différentes spécifications SVG, CSS ou JavaScript. -Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le [HTML](/fr/HTML "fr/HTML"). Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête : +Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le [HTML](/fr/HTML "fr/HTML"). Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête : - Les éléments et attributs SVG sont sensibles à la casse (contrairement au HTML et doivent donc tous être entrés avec la casse indiquée ici). - Les valeurs des attributs en SVG doivent être placées entre guillemets même si ce sont des nombres. diff --git a/files/fr/web/svg/tutorial/paths/index.md b/files/fr/web/svg/tutorial/paths/index.md index 996b502a0e..13529ed237 100644 --- a/files/fr/web/svg/tutorial/paths/index.md +++ b/files/fr/web/svg/tutorial/paths/index.md @@ -13,11 +13,11 @@ L’élément [`<path>`](/fr/Web/SVG/Element/path) (_chemin_ en français) est l Les chemins créent des formes en combinant plusieurs lignes droites ou courbes. Les formes composées uniquement de lignes droites peuvent être crées avec des [lignes brisées](/fr/docs/Web/SVG/Tutoriel/Formes_de_base#Lignes_brisées) (_polylines_). Bien que les lignes brisées et les chemins peuvent tout deux créer des formes d’apparence similaire, les lignes brisées nécessitent un grand nombre de petites lignes pour simuler des courbes, et qui ne s’adaptent pas bien aux grandes tailles. Une bonne compréhension des chemins est importante pour dessiner en SVG. Bien qu’il ne soit pas recommandé d'éditer des chemins complexes avec un éditeur XML ou texte (on utilisera plutôt un éditeur SVG tel que Inkscape ou Adobe Illustrator), comprendre comment un chemin s'écrit vous permettra éventuellement d’identifier et de corriger des erreurs d’affichage dans un SVG. -La forme d’un élément path est définie par son attribut {{ SVGAttr("d") }}. Celui-ci prend pour valeur une série de commandes suivi de paramètres utilisés par ces commandes. +La forme d’un élément path est définie par son attribut {{ SVGAttr("d") }}. Celui-ci prend pour valeur une série de commandes suivi de paramètres utilisés par ces commandes. -Chacune des commandes est instanciée par une lettre spécifique. Par exemple, pour se positionner aux coordonnées (10, 10), on utilise la commande `M` (pour _MoveTo,_ « aller à  ») suivit des coordonées: "M 10 10". Quand l’interpréteur rencontre une lettre, il comprend que vous invoquez une commande, et les nombres qui suivent sont les paramètres de la commande. +Chacune des commandes est instanciée par une lettre spécifique. Par exemple, pour se positionner aux coordonnées (10, 10), on utilise la commande `M` (pour _MoveTo,_ « aller à ») suivit des coordonées: "M 10 10". Quand l’interpréteur rencontre une lettre, il comprend que vous invoquez une commande, et les nombres qui suivent sont les paramètres de la commande. -De plus, toutes les commandes se présentent sous deux formes: une **lettre majuscule** spécifie des coordonnées absolues dans la page, une **lettre minuscule** spécifie des coordonées relatives (par exemple, « aller à 10px vers le haut et 7px vers la gauche depuis le point précédent »). +De plus, toutes les commandes se présentent sous deux formes: une **lettre majuscule** spécifie des coordonnées absolues dans la page, une **lettre minuscule** spécifie des coordonées relatives (par exemple, « aller à 10px vers le haut et 7px vers la gauche depuis le point précédent »). Les coordonnées dans l’attribut `d` sont **toujours sans unité** et par conséquent dans le système de coordonnées utilisateur. Par la suite, nous apprendrons comment les chemins peuvent être transformés pour répondre à d’autres besoins. @@ -27,7 +27,7 @@ Il existe cinq commandes pour tracer des lignes avec un élément `<path>`. Ces ### MoveTo -La première commande, « aller à  », invoquée avec `M` (_MoveTo_), a été décrite ci-dessus. Elle prend en paramètres les coordonnées `x` et `y` où se rendre. Aucun trait n’est dessiné, le curseur est simplement déplacé dans la page. La commande « aller à  » apparaît au début d’un chemin pour spécifier à quel endroit le dessin doit commencer. Par exemple : +La première commande, « aller à », invoquée avec `M` (_MoveTo_), a été décrite ci-dessus. Elle prend en paramètres les coordonnées `x` et `y` où se rendre. Aucun trait n’est dessiné, le curseur est simplement déplacé dans la page. La commande « aller à » apparaît au début d’un chemin pour spécifier à quel endroit le dessin doit commencer. Par exemple : M x y @@ -50,7 +50,7 @@ Dans l’exemple suivant, on se place au point (10, 10). Notez cependant qu'à c ### LineTo, Horizontal LineTo, Vertical LineTo -Il y a trois commandes qui dessinent des lignes. La plus générique est la commande « ligne vers », invoquée avec `L` (_LineTo_). `L` prend deux paramètres, les coordonnées `x` et `y`, et dessine une ligne depuis la position actuelle vers la nouvelle position. +Il y a trois commandes qui dessinent des lignes. La plus générique est la commande « ligne vers », invoquée avec `L` (_LineTo_). `L` prend deux paramètres, les coordonnées `x` et `y`, et dessine une ligne depuis la position actuelle vers la nouvelle position. L x y (ou l dx dy) @@ -59,7 +59,7 @@ Il existe deux formes abrégées pour dessiner des lignes horizontales ou vertic H x (ou h dx) V y (ou v dy) -Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément `<rect>`). Il est composé uniquement de lignes horizontales et verticales : +Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément `<rect>`). Il est composé uniquement de lignes horizontales et verticales :  @@ -77,11 +77,11 @@ Afin de commencer facilement, nous allons dessiner une forme simple, un rectangl ### ClosePath -On aurait pu raccourcir un peu la déclaration de l'exemple ci-dessus en utilisant la commande « fermer le chemin », invoquée avec `Z` (_ClosePath_). Cette commande dessine une ligne droite entre la position actuelle et le premier point du chemin. Elle est souvent placée à la fin du `path`, mais pas toujours. Il n’y a pas de différence entre la commande en majuscule et en minuscule. +On aurait pu raccourcir un peu la déclaration de l'exemple ci-dessus en utilisant la commande « fermer le chemin », invoquée avec `Z` (_ClosePath_). Cette commande dessine une ligne droite entre la position actuelle et le premier point du chemin. Elle est souvent placée à la fin du `path`, mais pas toujours. Il n’y a pas de différence entre la commande en majuscule et en minuscule. Z (ou z) -Ainsi, notre chemin précédent peut se raccourcir comme ceci: +Ainsi, notre chemin précédent peut se raccourcir comme ceci: ```xml <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> @@ -103,7 +103,7 @@ Dans ces exemples, il serait probablement plus simple d’utiliser un élément ## Commandes pour les courbes -Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la [page Wikipedia Courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier). +Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la [page Wikipedia Courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier). Il existe une infinité de courbes de Bézier, mais seulement deux des plus simples d’entre elles sont disponibles dans les éléments `path`: l’une cubique, invoquée avec `C`, et l’autre quadratique, invoquée avec `Q`. @@ -205,7 +205,7 @@ L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcoura #### x-axis-rotation -`x-axis-rotation` décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple: +`x-axis-rotation` décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple:  @@ -213,7 +213,7 @@ L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcoura <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <line x1="10" y1="315" x2="315" y2="10" stroke="black" stroke-width="2" /> - <path d="M110 215      a 30 50  0 0 1 52.55 -52.45" fill="#7FBF7F" stroke="black" stroke-width="2" /> + <path d="M110 215 a 30 50 0 0 1 52.55 -52.45" fill="#7FBF7F" stroke="black" stroke-width="2" /> <path d="M172.55 152.45 a 30 50 -45 0 1 42.55 -42.55" fill="#7FBF7F" stroke="black" stroke-width="2" /> </svg> ``` @@ -269,7 +269,7 @@ Pour un rayon `rx` et un rayon `ry` donnés, il existe deux ellipses pouvant con Pour chacune des deux ellipses, il existe deux chemins possibles, ce qui donne quatre chemins possibles. -`large-arc-flag` détermine simplement si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée. +`large-arc-flag` détermine simplement si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée. ```html <!-- large-arc-flag: 0 --> diff --git a/files/fr/web/svg/tutorial/patterns/index.md b/files/fr/web/svg/tutorial/patterns/index.md index 4f598d9087..bbfbb74002 100644 --- a/files/fr/web/svg/tutorial/patterns/index.md +++ b/files/fr/web/svg/tutorial/patterns/index.md @@ -15,24 +15,24 @@ Les motifs (_patterns_ en anglais) sont sans aucun doute les types de remplissag ```html <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> - <defs> -   <linearGradient id="Gradient1"> -     <stop offset="5%" stop-color="white"/> -     <stop offset="95%" stop-color="blue"/> -   </linearGradient> -   <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> -     <stop offset="5%" stop-color="red"/> -     <stop offset="95%" stop-color="orange"/> -   </linearGradient> - -   <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> -     <rect x="0" y="0" width="50" height="50" fill="skyblue"/> -     <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> -     <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> -   </pattern> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> </svg> ``` @@ -46,7 +46,7 @@ La partie pouvant apporter le plus de confusion avec les motifs est le système Les attributs `width` et `height` sur l'élément `pattern` décrivent jusqu'où le motif doit aller avant de se répéter. Les attributs `x` et `y` sont également disponibles si vous souhaitez décaler le point de départ du motif à l'intérieur du dessin. -Même principe que l'attribut `gradientUnits` (que nous avons vu précédemment avec les dégradés), les motifs peuvent prendre un attribut `patternUnits`, pour spécifier l'unité utilisée par le motif. La valeur par défaut est "objectBoundingBox", ainsi une taille de 1 remplira entièrement la hauteur/largeur de l'objet auquel le motif est appliqué. Puisque dans notre cas, on veut que le motif se répète 4 fois horizontalement et verticalement, on a définit `height` et `width` à 0.25. Cela signifie que la hauteur et largeur du pattern sera de 25% celle de l'objet. +Même principe que l'attribut `gradientUnits` (que nous avons vu précédemment avec les dégradés), les motifs peuvent prendre un attribut `patternUnits`, pour spécifier l'unité utilisée par le motif. La valeur par défaut est "objectBoundingBox", ainsi une taille de 1 remplira entièrement la hauteur/largeur de l'objet auquel le motif est appliqué. Puisque dans notre cas, on veut que le motif se répète 4 fois horizontalement et verticalement, on a définit `height` et `width` à 0.25. Cela signifie que la hauteur et largeur du pattern sera de 25% celle de l'objet. De même, pour que le motif commence à 10 pixels du bord supérieur-gauche de l'objet, il faudrait définir les valeurs de `x` et `y` à 0.05 (10/200 = 0.05). @@ -62,29 +62,29 @@ La chose à retenir est que si l'objet change de taille, le motif lui-même sera ```html hidden <svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> - <defs> -   <linearGradient id="Gradient1"> -     <stop offset="5%" stop-color="white"/> -     <stop offset="95%" stop-color="blue"/> -   </linearGradient> -   <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> -     <stop offset="5%" stop-color="red"/> -     <stop offset="95%" stop-color="orange"/> -   </linearGradient> - -   <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> -     <rect x="0" y="0" width="50" height="50" fill="skyblue"/> -     <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> -     <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> -   </pattern> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> </svg> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> rect.setAttribute('width', 300);</textarea> @@ -134,29 +134,29 @@ Maintenant, parce le contenu du motif utilise le même système d'unité que le ```html hidden <svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> - <defs> -   <linearGradient id="Gradient1"> -     <stop offset="5%" stop-color="white"/> -     <stop offset="95%" stop-color="blue"/> -   </linearGradient> -   <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> -     <stop offset="5%" stop-color="red"/> -     <stop offset="95%" stop-color="orange"/> -   </linearGradient> - -   <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> -     <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> -     <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> -     <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> -   </pattern> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" width=".25" height=".25" patternContent + <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> + <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> + <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> </svg> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> rect.setAttribute('width', 300);</textarea> @@ -208,29 +208,29 @@ Bien sûr, cela veut dire que le motif ne sera pas mis à l'échelle si vous mod ```html hidden <svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> - <defs> -   <linearGradient id="Gradient1"> -     <stop offset="5%" stop-color="white"/> -     <stop offset="95%" stop-color="blue"/> -   </linearGradient> -   <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> -     <stop offset="5%" stop-color="red"/> -     <stop offset="95%" stop-color="orange"/> -   </linearGradient> - -   <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"> -     <rect x="0" y="0" width="50" height="50" fill="skyblue"/> -     <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> -     <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> -   </pattern> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x="10" y="10" width="50" height="50" + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> </svg> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> rect.setAttribute('width', 300);</textarea> diff --git a/files/fr/web/svg/tutorial/svg_and_css/index.md b/files/fr/web/svg/tutorial/svg_and_css/index.md index c89a4edf3d..aa54e0b787 100644 --- a/files/fr/web/svg/tutorial/svg_and_css/index.md +++ b/files/fr/web/svg/tutorial/svg_and_css/index.md @@ -39,7 +39,7 @@ Créez un nouveau document SVG en tant que fichier texte brut, `doc.svg`. Copiez </defs> <text id="heading" x="-280" y="-270">Démonstration SVG</text> -<text id="caption" x="-280" y="-250">Déplacez le pointeur de +<text id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text> <g id="flower"> @@ -423,7 +423,7 @@ Voici comment se présente la structure du document SVG désormais. </defs> <text id="heading" x="-280" y="-270">Démonstration SVG</text> - <text id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text> + <text id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> diff --git a/files/fr/web/svg/tutorial/svg_fonts/index.md b/files/fr/web/svg/tutorial/svg_fonts/index.md index 89ee876a72..94fa8d0d03 100644 --- a/files/fr/web/svg/tutorial/svg_fonts/index.md +++ b/files/fr/web/svg/tutorial/svg_fonts/index.md @@ -39,7 +39,7 @@ Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenon Nous commençons avec l'élement {{ SVGElement("font") }}. Il contient un attribut id, ce qui permet de le référencer via une URI (voir plus bas). L'attribut `horiz-adv-x` définit sa largeur moyenne, comparée aux définitions des autres glyphes individules. La valeur 1000 définit une valeur raisonnable. Plusieurs autres attributs associés précisent l'affichage de la boite qui encapsule le glyphe. -L'élément {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS [`@font-face`](/fr/CSS/@font-face "en/css/@font-face"). Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est `font-family` : Elle pourra alors être référencée via la propriété `font-family` présente dans les CSS et les SVG. Les attributs `font-weight` et `font-style` ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes ([ascenders](http://en.wikipedia.org/wiki/Ascender_%28typography%29)). +L'élément {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS [`@font-face`](/fr/CSS/@font-face "en/css/@font-face"). Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est `font-family` : Elle pourra alors être référencée via la propriété `font-family` présente dans les CSS et les SVG. Les attributs `font-weight` et `font-style` ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes ([ascenders](http://en.wikipedia.org/wiki/Ascender_%28typography%29)). Its child, the {{ SVGElement("font-face-src") }} element, corresponds to CSS' `src` descriptor in `@font-face` declarations. You can point to external sources for font declarations by means of its children {{ SVGElement("font-face-name") }} and {{ SVGElement("font-face-uri") }}. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead. diff --git a/files/fr/web/svg/tutorial/svg_image_tag/index.md b/files/fr/web/svg/tutorial/svg_image_tag/index.md index 5070f36eca..b74d927031 100644 --- a/files/fr/web/svg/tutorial/svg_image_tag/index.md +++ b/files/fr/web/svg/tutorial/svg_image_tag/index.md @@ -12,7 +12,7 @@ original_slug: Web/SVG/Tutoriel/SVG_Image_Tag L'élément SVG {{ SVGElement("image") }} permet d'afficher des images pixélisées au sein d'un objet SVG. -Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink:href") }} sera rendue à l'intérieur d'un objet SVG. +Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink:href") }} sera rendue à l'intérieur d'un objet SVG. ```xml <?xml version="1.0" standalone="no"?> @@ -27,7 +27,7 @@ Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink: Il faut prendre note de quelques point essentiels (donnés par les [spécifications W3](http://www.w3.org/TR/SVG/struct.html#ImageElement)): - Si les attributs x ou y ne sont pas spécifiés, ils vaudront 0. -- Si les attributs height ou width ne sont pas spécifiés, ils vaudront 0. +- Si les attributs height ou width ne sont pas spécifiés, ils vaudront 0. - Si l'attribut height ou l'attribut width est initialisé à 0, cela désactivera l'affichage de l'image. {{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }} diff --git a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md index 4f28884c41..a68c21f6d2 100644 --- a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md +++ b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md @@ -56,12 +56,12 @@ Voici le code source de cet exemple : ### Discussion -La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément \<svg>. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attribut `invalid` à la balise \<body> et une règle de style modifie la couleur `end-stop` du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur). +La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément \<svg>. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attribut `invalid` à la balise \<body> et une règle de style modifie la couleur `end-stop` du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur). -Cette approche bénéficie des points suivants en sa faveur : +Cette approche bénéficie des points suivants en sa faveur : - Nous avons choisi un formulaire XHTML classique qui pourrait faire partie d'un site Web existant, et lui avons ajouté un fond attractif et interactif -- L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux +- L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux - Elle est très simple et remplit sa fonction parfaitement - L'image se redimensionne automatiquement à la taille requise de manière intelligente - Nous pouvons avoir des déclarations de styles appliquées à la fois sur le HTML et le SVG diff --git a/files/fr/web/svg/tutorial/texts/index.md b/files/fr/web/svg/tutorial/texts/index.md index 86942d29c4..6896555e2c 100644 --- a/files/fr/web/svg/tutorial/texts/index.md +++ b/files/fr/web/svg/tutorial/texts/index.md @@ -93,9 +93,9 @@ Cet élément récupère via son attribut `xlink:href` un chemin arbitraire et a ```xml <path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" /> <text> - <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> -   A curve. - </textPath> + <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> + A curve. + </textPath> </text> ``` @@ -105,9 +105,9 @@ Cet élément récupère via son attribut `xlink:href` un chemin arbitraire et a <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" /> <text> - <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> -   A curve. - </textPath> + <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> + A curve. + </textPath> </text> <style>< -L'un des outils fondamentaux pour travailler un format graphique est un logiciel de dessin performant. Inkscape permet de faire du dessin vectoriel, il est mis à jour régulièrement, et a le mérite d'être open source. +L'un des outils fondamentaux pour travailler un format graphique est un logiciel de dessin performant. Inkscape permet de faire du dessin vectoriel, il est mis à jour régulièrement, et a le mérite d'être open source. -Il utilise le SVG comme format natif, et l'étend avec des éléments et attributs définis dans un espace de nommage spécifique. On peut aussi choisir un export au format SVG standard. +Il utilise le SVG comme format natif, et l'étend avec des éléments et attributs définis dans un espace de nommage spécifique. On peut aussi choisir un export au format SVG standard. ## Adobe Illustrator URL: [www.adobe.com/products/illustrator/](http://www.adobe.com/products/illustrator/) -Avant de racheter Macromedia, Adobe était le plus ardent défenseur de SVG. C'est de cette époque que date le bon support du SVG dans Illustrator. Cependant, le code généré comporte souvent des bizarreries, qui obligent à le retraiter pour pouvoir l'utiliser en dehors d'Illustrator. +Avant de racheter Macromedia, Adobe était le plus ardent défenseur de SVG. C'est de cette époque que date le bon support du SVG dans Illustrator. Cependant, le code généré comporte souvent des bizarreries, qui obligent à le retraiter pour pouvoir l'utiliser en dehors d'Illustrator. ## Apache Batik URL: [xmlgraphics.apache.org/batik/](http://xmlgraphics.apache.org/batik/) -Batik est un ensemble d'outils open source proposés par Apache Software Foundation. La boite à outils est codée en Java et assure un support quasi intégral de SVG 1.1, ainsi que certaines des fonctionnalités qui étaient prévues à l'origine pour SVG 1.2. +Batik est un ensemble d'outils open source proposés par Apache Software Foundation. La boite à outils est codée en Java et assure un support quasi intégral de SVG 1.1, ainsi que certaines des fonctionnalités qui étaient prévues à l'origine pour SVG 1.2. -En plus d'un outil de visualisation (Squiggle) et d'un moteur d'aplatissement des calques pour l'export en PNG, Batik propose aussi un outil de formatage du code SVG, ainsi qu'un convertisseur de typographie TrueType vers SVG. +En plus d'un outil de visualisation (Squiggle) et d'un moteur d'aplatissement des calques pour l'export en PNG, Batik propose aussi un outil de formatage du code SVG, ainsi qu'un convertisseur de typographie TrueType vers SVG. -Utilisé avec [Apache FOP](http://xmlgraphics.apache.org/fop/), il permet également de transformer du SVG en PDF. +Utilisé avec [Apache FOP](http://xmlgraphics.apache.org/fop/), il permet également de transformer du SVG en PDF. ### Autres moteurs de rendu -Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. [ImageMagick](http://ImageMagick.org) est l'un des outils les plus connus de traitement des images en ligne de commande.  Wikipédia utilise la librairie de code Gnome [rsvg](http://library.gnome.org/devel/rsvg/) pour le rendu de ses images SVG. +Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. [ImageMagick](http://ImageMagick.org) est l'un des outils les plus connus de traitement des images en ligne de commande. Wikipédia utilise la librairie de code Gnome [rsvg](http://library.gnome.org/devel/rsvg/) pour le rendu de ses images SVG. ## Raphael JS URL: [raphaeljs.com](http://raphaeljs.com/) -Raphaël est un framework javascript, qui propose une couche d'abstraction pour les différentes implémentations des navigateurs. Les vieilles versions d'Internet Explorer sont supportées grace à la génération de code VML, un langage de balisage vectoriel, qui est l'un des ancêtres de SVG et existe depuis IE 5.5. +Raphaël est un framework javascript, qui propose une couche d'abstraction pour les différentes implémentations des navigateurs. Les vieilles versions d'Internet Explorer sont supportées grace à la génération de code VML, un langage de balisage vectoriel, qui est l'un des ancêtres de SVG et existe depuis IE 5.5. ## Snap.svg -URL: [snapsvg.io](http://snapsvg.io/) +URL: [snapsvg.io](http://snapsvg.io/) Une nouvelle couche d'abstraction JavaScript, plus récent, du même auteur que Raphael JS. Snap.svg est conçu pour les navigateurs modernes et prend donc en charge les dernières fonctionnalités SVG telles que la masquage, le découpage, les motifs, gradients et groupes. Il ne supporte pas les anciens navigateurs, contrairement à Raphael. @@ -56,16 +56,16 @@ Une nouvelle couche d'abstraction JavaScript, plus récent, du même auteur que URL: [www.google.com/google-d-s/drawings/](http://www.google.com/google-d-s/drawings/) -Les dessins réalisés dans Google Docs peuvent être exportés en SVG. +Les dessins réalisés dans Google Docs peuvent être exportés en SVG. ## Science -Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web [JSXGraph](http://jsxgraph.uni-bayreuth.de/wp/) supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs. +Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web [JSXGraph](http://jsxgraph.uni-bayreuth.de/wp/) supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs. -SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf [carto.net](http://carto.net) pour davantage de détails. +SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf [carto.net](http://carto.net) pour davantage de détails. ## Autres outils -Le W3C propose une [liste des programmes](http://www.w3.org/Graphics/SVG/WG/wiki/Implementations) qui supportent le SVG. +Le W3C propose une [liste des programmes](http://www.w3.org/Graphics/SVG/WG/wiki/Implementations) qui supportent le SVG. {{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }} |