From e7f1d07cba1f78b72eb43bfcdabc262359c4991a Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Mon, 1 Nov 2021 07:45:47 +0100 Subject: Prepare SVG section for Markdown conversion (#2570) * Remove summary classes * Remove hidden classes out of pre * Remove spans * Remove notranslate class * Remove ids out of headings * missed 2 ids with regex * clean note and warning cards * fix headings errors * Fix dls and as * fix imgs * lint stuff (absolute urls, english links) * Temporarily readding file * delete inexisting doc in en-US with flaws * Fixes #2842 for SVG --- files/fr/web/svg/element/a/index.html | 13 +++--- files/fr/web/svg/element/altglyphdef/index.html | 4 +- files/fr/web/svg/element/altglyphitem/index.html | 4 +- files/fr/web/svg/element/animate/index.html | 4 +- files/fr/web/svg/element/animatecolor/index.html | 18 ++++---- files/fr/web/svg/element/animatemotion/index.html | 14 +++--- .../fr/web/svg/element/animatetransform/index.html | 18 ++++---- files/fr/web/svg/element/circle/index.html | 4 +- files/fr/web/svg/element/clippath/index.html | 10 ++-- files/fr/web/svg/element/defs/index.html | 10 ++-- files/fr/web/svg/element/desc/index.html | 6 +-- files/fr/web/svg/element/ellipse/index.html | 4 +- files/fr/web/svg/element/fecomposite/index.html | 2 +- .../fr/web/svg/element/feconvolvematrix/index.html | 4 +- files/fr/web/svg/element/fegaussianblur/index.html | 18 +++----- files/fr/web/svg/element/fetile/index.html | 2 +- files/fr/web/svg/element/foreignobject/index.html | 10 ++-- files/fr/web/svg/element/g/index.html | 29 ++++++------ files/fr/web/svg/element/hkern/index.html | 2 +- files/fr/web/svg/element/image/index.html | 4 +- files/fr/web/svg/element/index.html | 10 ++-- files/fr/web/svg/element/line/index.html | 15 +++--- files/fr/web/svg/element/lineargradient/index.html | 2 +- files/fr/web/svg/element/marker/index.html | 10 ++-- files/fr/web/svg/element/mask/index.html | 18 ++++---- files/fr/web/svg/element/path/index.html | 6 +-- files/fr/web/svg/element/pattern/index.html | 53 ++++++++++------------ files/fr/web/svg/element/polygon/index.html | 10 ++-- files/fr/web/svg/element/radialgradient/index.html | 6 +-- files/fr/web/svg/element/rect/index.html | 6 +-- files/fr/web/svg/element/stop/index.html | 8 ++-- files/fr/web/svg/element/style/index.html | 10 ++-- files/fr/web/svg/element/svg/index.html | 14 +++--- files/fr/web/svg/element/switch/index.html | 2 +- files/fr/web/svg/element/symbol/index.html | 12 ++--- files/fr/web/svg/element/text/index.html | 10 ++-- files/fr/web/svg/element/title/index.html | 2 +- files/fr/web/svg/element/tspan/index.html | 29 +++++++++--- files/fr/web/svg/element/use/index.html | 18 ++++---- 39 files changed, 205 insertions(+), 216 deletions(-) (limited to 'files/fr/web/svg/element') diff --git a/files/fr/web/svg/element/a/index.html b/files/fr/web/svg/element/a/index.html index dcd2251bff..a3d70a3edd 100644 --- a/files/fr/web/svg/element/a/index.html +++ b/files/fr/web/svg/element/a/index.html @@ -15,19 +15,18 @@ translation_of: Web/SVG/Element/a

Exemple

- +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <!-- Un lien autour d'une forme -->
-  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">
+  <a href="/docs/Web/SVG/Element/circle">
     <circle cx="50" cy="40" r="35"/>
   </a>
 
   <!-- Un lien autour d'un texte -->
-  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">
+  <a href="/docs/Web/SVG/Element/circle">
     <text x="50" y="90" text-anchor="middle">
       &lt;circle&gt;
     </text>
@@ -55,7 +54,7 @@ svgns|a:hover, svgns|a:active {
 

{{EmbedLiveSample('Exemple', 100, 100)}}

-

Étant donné que cet élément partage son nom de balise avec l'élément HTML <a>, la sélection de "a" avec CSS ou querySelector peut s'appliquer au mauvais type d'élément. La règle @namespace permet de faire la distinction entre les deux.

+

Attention : Étant donné que cet élément partage son nom de balise avec l'élément HTML <a>, la sélection de "a" avec CSS ou querySelector peut s'appliquer au mauvais type d'élément. La règle @namespace permet de faire la distinction entre les deux.

Attributs

@@ -96,7 +95,7 @@ svgns|a:hover, svgns|a:active {

Interface DOM

-

Cet élément implémente l'interface SVGAElement.

+

Cet élément implémente l'interface SVGAElement.

Spécifications

diff --git a/files/fr/web/svg/element/altglyphdef/index.html b/files/fr/web/svg/element/altglyphdef/index.html index 26f1616c86..a326de0562 100644 --- a/files/fr/web/svg/element/altglyphdef/index.html +++ b/files/fr/web/svg/element/altglyphdef/index.html @@ -22,7 +22,7 @@ translation_of: Web/SVG/Element/altGlyphDef

Attributs globaux

Attributs spécifiques

@@ -31,7 +31,7 @@ translation_of: Web/SVG/Element/altGlyphDef

Interface DOM

-

Cet élément implémente l'interface SVGAltGlyphDefElement.

+

Cet élément implémente l'interface SVGAltGlyphDefElement.

Voir également

diff --git a/files/fr/web/svg/element/altglyphitem/index.html b/files/fr/web/svg/element/altglyphitem/index.html index ddd7465200..2302fb57fa 100644 --- a/files/fr/web/svg/element/altglyphitem/index.html +++ b/files/fr/web/svg/element/altglyphitem/index.html @@ -22,7 +22,7 @@ translation_of: Web/SVG/Element/altGlyphItem

Attributs globaux

Attributs spécifiques

@@ -31,7 +31,7 @@ translation_of: Web/SVG/Element/altGlyphItem

Interface DOM

-

Cet élément implémente l'interface SVGAltGlyphItemElement.

+

Cet élément implémente l'interface SVGAltGlyphItemElement.

 

diff --git a/files/fr/web/svg/element/animate/index.html b/files/fr/web/svg/element/animate/index.html index fdd49d7f6e..49b8564999 100644 --- a/files/fr/web/svg/element/animate/index.html +++ b/files/fr/web/svg/element/animate/index.html @@ -44,7 +44,7 @@ translation_of: Web/SVG/Element/animate

Interface DOM

-

Cet élément implémente l'interface SVGAnimateElement.

+

Cet élément implémente l'interface SVGAnimateElement.

Exemple

@@ -74,7 +74,7 @@ translation_of: Web/SVG/Element/animate
  • Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
  • An Introduction to the Reduced Motion Media Query | CSS-Tricks
  • Responsive Design for Motion | WebKit
  • -
  • MDN Understanding WCAG, Guideline 2.2 explanations
  • +
  • MDN Understanding WCAG, Guideline 2.2 explanations
  • Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
  • diff --git a/files/fr/web/svg/element/animatecolor/index.html b/files/fr/web/svg/element/animatecolor/index.html index 9b274cfadc..dd2d640ab4 100644 --- a/files/fr/web/svg/element/animatecolor/index.html +++ b/files/fr/web/svg/element/animatecolor/index.html @@ -10,7 +10,7 @@ translation_of: Web/SVG/Element/animateColor
    {{SVGRef}}{{deprecated_header}}
    -

    Cet élément est déprécié depuis SVG 1.1 Deuxième édition et peut etre retiré dans une prochaine version de SVG. Il ne fournis pas de fonctionnalités non disponible en utilisant l'élément {{ SVGElement("animate") }}. Il n'est pas implémenté dans Firefox ni dans Internet Explorer. Il est préférable d'utiliser l'élément {{ SVGElement("animate") }} à la place.

    +

    Attention : Cet élément est déprécié depuis SVG 1.1 Deuxième édition et peut etre retiré dans une prochaine version de SVG. Il ne fournis pas de fonctionnalités non disponible en utilisant l'élément {{ SVGElement("animate") }}. Il n'est pas implémenté dans Firefox ni dans Internet Explorer. Il est préférable d'utiliser l'élément {{ SVGElement("animate") }} à la place.

    L'élément <animateColor> spécifie une transformation de couleur à travers le temps.

    @@ -24,14 +24,14 @@ translation_of: Web/SVG/Element/animateColor

    Attributs globaux

    diff --git a/files/fr/web/svg/element/animatemotion/index.html b/files/fr/web/svg/element/animatemotion/index.html index 059aab46e5..d5bc8130ca 100644 --- a/files/fr/web/svg/element/animatemotion/index.html +++ b/files/fr/web/svg/element/animatemotion/index.html @@ -20,13 +20,13 @@ translation_of: Web/SVG/Element/animateMotion

    Attributs globaux

    diff --git a/files/fr/web/svg/element/animatetransform/index.html b/files/fr/web/svg/element/animatetransform/index.html index ba0230f67a..b572d797e3 100644 --- a/files/fr/web/svg/element/animatetransform/index.html +++ b/files/fr/web/svg/element/animatetransform/index.html @@ -40,14 +40,14 @@ translation_of: Web/SVG/Element/animateTransform

    Attributs globaux

    @@ -62,7 +62,7 @@ translation_of: Web/SVG/Element/animateTransform

    Interface DOM

    -

    Cet élément implémente l'interface SVGAnimateTransformElement.

    +

    Cet élément implémente l'interface SVGAnimateTransformElement.

    Spécifications

    diff --git a/files/fr/web/svg/element/circle/index.html b/files/fr/web/svg/element/circle/index.html index 8cc64ab6f0..6fba0b5e8d 100644 --- a/files/fr/web/svg/element/circle/index.html +++ b/files/fr/web/svg/element/circle/index.html @@ -17,9 +17,7 @@ translation_of: Web/SVG/Element/circle

    Exemple

    - +
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     
    diff --git a/files/fr/web/svg/element/clippath/index.html b/files/fr/web/svg/element/clippath/index.html
    index 60707ba146..8ff3ec5a54 100644
    --- a/files/fr/web/svg/element/clippath/index.html
    +++ b/files/fr/web/svg/element/clippath/index.html
    @@ -12,10 +12,9 @@ translation_of: Web/SVG/Element/clipPath
     
     

    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.

    -
    - +

    Exemple

    + +
    <svg viewBox="0 0 100 100">
       <clipPath id="myClip">
    @@ -42,8 +41,7 @@ translation_of: Web/SVG/Element/clipPath
       animation: openYourHeart 15s infinite;
     }
    -

    {{EmbedLiveSample('Example', 100, 100)}}

    -
    +

    {{EmbedLiveSample('exemple', 100, 100)}}

    Sur le plan conceptuel, un détourage est un peu comme une zone d'affichage personnalisée pour l'élément sur lequel il est appliqué. Cela va limiter la zone dans laquelle l'élément est affiché, sans affecter sa géométrie (position, taille, etc).

    diff --git a/files/fr/web/svg/element/defs/index.html b/files/fr/web/svg/element/defs/index.html index 2531f7524a..6072fe6564 100644 --- a/files/fr/web/svg/element/defs/index.html +++ b/files/fr/web/svg/element/defs/index.html @@ -36,10 +36,10 @@ translation_of: Web/SVG/Element/defs

    Attributs globaux

      -
    • Conditional processing attributes »
    • -
    • Core attributes »
    • -
    • Graphical event attributes »
    • -
    • Presentation attributes »
    • +
    • Conditional processing attributes »
    • +
    • Core attributes »
    • +
    • Graphical event attributes »
    • +
    • Presentation attributes »
    • {{SVGAttr("class")}}
    • {{SVGAttr("style")}}
    • {{SVGAttr("externalResourcesRequired")}}
    • @@ -52,7 +52,7 @@ translation_of: Web/SVG/Element/defs

      Interface avec DOM

      -

      Cet élément est implémenté par l'interface SVGDefsElement.

      +

      Cet élément est implémenté par l'interface SVGDefsElement.

      Spécifications

      diff --git a/files/fr/web/svg/element/desc/index.html b/files/fr/web/svg/element/desc/index.html index 02cb205cdd..8ef116c3d2 100644 --- a/files/fr/web/svg/element/desc/index.html +++ b/files/fr/web/svg/element/desc/index.html @@ -19,7 +19,7 @@ translation_of: Web/SVG/Element/desc

      Attributs

      -

      Attributs globaux

      +

      Attributs globaux

      • Attributs de base »
      • @@ -27,11 +27,11 @@ translation_of: Web/SVG/Element/desc
      • {{ SVGAttr("style") }}
      -

      Attributs spécifiques

      +

      Attributs spécifiques

      (Aucun)

      -

      Interface DOM

      +

      Interface DOM

      Cet élément implémente l'interface SVGDescElement.

      diff --git a/files/fr/web/svg/element/ellipse/index.html b/files/fr/web/svg/element/ellipse/index.html index 4ca81837ec..450766fb25 100644 --- a/files/fr/web/svg/element/ellipse/index.html +++ b/files/fr/web/svg/element/ellipse/index.html @@ -15,7 +15,7 @@ translation_of: Web/SVG/Element/ellipse

      Note: Il est impossible de spécifier l'orientation exacte d'une ellipse (par exemple, si vous souhaitez dessiner une ellipse à un angle de 45°), mais l'ellipse peut avoir une rotation avec l'attribut {{ SVGAttr("transform") }}.

      -
      <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
      +
      <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
         <ellipse cx="100" cy="50" rx="100" ry="50" />
       </svg>
      @@ -94,7 +94,7 @@ translation_of: Web/SVG/Element/ellipse

      Interface DOM

      -

      Cet élément implémente l'interface SVGEllipseElement.

      +

      Cet élément implémente l'interface SVGEllipseElement.

      Spécifications

      diff --git a/files/fr/web/svg/element/fecomposite/index.html b/files/fr/web/svg/element/fecomposite/index.html index 903bc3d238..096b79e038 100644 --- a/files/fr/web/svg/element/fecomposite/index.html +++ b/files/fr/web/svg/element/fecomposite/index.html @@ -33,7 +33,7 @@ translation_of: Web/SVG/Element/feComposite
      • Attributs de base
      • -
      • Attributs de présentation
      • +
      • Attributs de présentation
      • Attributs de primitive de filtre
      • {{SVGAttr("class")}}
      • {{SVGAttr("style")}}
      • diff --git a/files/fr/web/svg/element/feconvolvematrix/index.html b/files/fr/web/svg/element/feconvolvematrix/index.html index e2621f7c59..21e05a3104 100644 --- a/files/fr/web/svg/element/feconvolvematrix/index.html +++ b/files/fr/web/svg/element/feconvolvematrix/index.html @@ -13,7 +13,7 @@ translation_of: Web/SVG/Element/feConvolveMatrix

        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 :

        -

        COLORX,Y = ( 
        +

        COLORX,Y = ( 
                      SUM I=0 to [orderY-1] { 
                        SUM J=0 to [orderX-1] { 
                          SOURCE X-targetX+J, Y-targetY+I *  kernelMatrixorderX-J-1,  orderY-I-1 
        @@ -50,7 +50,7 @@ translation_of: Web/SVG/Element/feConvolveMatrix 7 8 9

      -

      Concentrons-nous sur la valeur de couleur de la deuxième ligne, deuxième colonne (la valeur du pixel source est 120). En supposant le cas le plus simple (quand le quadrillage de pixels de l'image source s'aligne parfaitement avec celui du noyau) et en supposant les valeurs par défaut des attributs divisor, targetX et targetY, alors la valeur de couleur résultante sera :

      +

      Concentrons-nous sur la valeur de couleur de la deuxième ligne, deuxième colonne (la valeur du pixel source est 120). En supposant le cas le plus simple (quand le quadrillage de pixels de l'image source s'aligne parfaitement avec celui du noyau) et en supposant les valeurs par défaut des attributs divisor, targetX et targetY, alors la valeur de couleur résultante sera :

      (9*  0 + 8* 20 + 7* 40 +
        6*100 + 5*120 + 4*140 +
      diff --git a/files/fr/web/svg/element/fegaussianblur/index.html b/files/fr/web/svg/element/fegaussianblur/index.html
      index 7dfc80a073..c2a9fdbe70 100644
      --- a/files/fr/web/svg/element/fegaussianblur/index.html
      +++ b/files/fr/web/svg/element/fegaussianblur/index.html
      @@ -1,10 +1,6 @@
       ---
       title: 
       slug: Web/SVG/Element/feGaussianBlur
      -tags:
      -  - Element
      -  - SVG
      -  - SVG Filter
       translation_of: Web/SVG/Element/feGaussianBlur
       ---
       
      {{SVGRef}}
      @@ -20,9 +16,9 @@ translation_of: Web/SVG/Element/feGaussianBlur

      Attributs globaux

      @@ -61,9 +57,9 @@ translation_of: Web/SVG/Element/feGaussianBlur

      Résultat

      -

      {{EmbedLiveSample("Exemple_simple",232,124,"/files/4227/feGaussianBlur.png")}}

      +

      {{EmbedLiveSample("Exemple_simple",232,124)}}

      -

      Exemple d'ombre portée

      +

      Exemple avec une ombre portée

      SVG

      @@ -86,7 +82,7 @@ translation_of: Web/SVG/Element/feGaussianBlur

      Résultat

      -

      {{EmbedLiveSample("Exemple_d'ombre_portée",125,124,"/files/4229/feGaussianBlur-dropshadow.png")}}

      +

      {{EmbedLiveSample("Exemple_avec_une_ombre_portée",125,124)}}

      Spécifications

      @@ -135,5 +131,5 @@ translation_of: Web/SVG/Element/feGaussianBlur
    • {{SVGElement("feSpecularLighting")}}
    • {{SVGElement("feTile")}}
    • {{SVGElement("feTurbulence")}}
    • -
    • Tutoriel SVG: Filtres
    • +
    • Tutoriel SVG: Filtres
    diff --git a/files/fr/web/svg/element/fetile/index.html b/files/fr/web/svg/element/fetile/index.html index b66ac9f9bf..f4acbdf1c9 100644 --- a/files/fr/web/svg/element/fetile/index.html +++ b/files/fr/web/svg/element/fetile/index.html @@ -109,5 +109,5 @@ translation_of: Web/SVG/Element/feTile
  • {{SVGElement("feOffset")}}
  • {{SVGElement("feSpecularLighting")}}
  • {{SVGElement("feTurbulence")}}
  • -
  • SVG tutorial: Filter effects
  • +
  • SVG tutorial: Filter effects
  • diff --git a/files/fr/web/svg/element/foreignobject/index.html b/files/fr/web/svg/element/foreignobject/index.html index ef67d24b0b..993f08a761 100644 --- a/files/fr/web/svg/element/foreignobject/index.html +++ b/files/fr/web/svg/element/foreignobject/index.html @@ -11,10 +11,9 @@ translation_of: Web/SVG/Element/foreignObject

    L'élément <foreignObject> permet d'inclure des éléments d'un espace de noms XML différent à l'intérieur du SVG. Dans le contexte d'un navigateur, il s'agit généralement d'inclure du XHTML/HTML.

    -
    - +

    Exemple

    + +
    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
       <style>
    @@ -45,8 +44,7 @@ translation_of: Web/SVG/Element/foreignObject
       </foreignObject>
     </svg>
    -

    {{EmbedLiveSample('Exemple', 150, '100%')}}

    -
    +

    {{EmbedLiveSample('exemple', 150, '100%')}}

    Attributs

    diff --git a/files/fr/web/svg/element/g/index.html b/files/fr/web/svg/element/g/index.html index e5b414e425..87392d44f3 100644 --- a/files/fr/web/svg/element/g/index.html +++ b/files/fr/web/svg/element/g/index.html @@ -14,21 +14,20 @@ translation_of: Web/SVG/Element/g

    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")}}.

    -
    - - -
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    -  <!-- Les enfants de g héritent de ses attributs de présentation -->
    -  <g fill="white" stroke="green" stroke-width="5">
    -    <circle cx="40" cy="40" r="25" />
    -    <circle cx="60" cy="60" r="25" />
    -  </g>
    -</svg>
    -
    - -

    {{EmbedLiveSample('Exemple', 100, '100%')}}

    +

    Exemple

    + + + + +
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    +  <!-- Les enfants de g héritent de ses attributs de présentation -->
    +  <g fill="white" stroke="green" stroke-width="5">
    +    <circle cx="40" cy="40" r="25" />
    +    <circle cx="60" cy="60" r="25" />
    +  </g>
    +</svg>
    + +

    {{EmbedLiveSample('exemple', 100, '100%')}}

    Attributs

    diff --git a/files/fr/web/svg/element/hkern/index.html b/files/fr/web/svg/element/hkern/index.html index 60f8869c10..72fed53d97 100644 --- a/files/fr/web/svg/element/hkern/index.html +++ b/files/fr/web/svg/element/hkern/index.html @@ -23,7 +23,7 @@ translation_of: Web/SVG/Element/hkern

    Attributs globaux

    Attributs spécifiques

    diff --git a/files/fr/web/svg/element/image/index.html b/files/fr/web/svg/element/image/index.html index e81004b2f9..24e230b8a4 100644 --- a/files/fr/web/svg/element/image/index.html +++ b/files/fr/web/svg/element/image/index.html @@ -15,7 +15,7 @@ translation_of: Web/SVG/Element/image

    Rendu basique d'une image PNG dans un objet SVG :

    -
    <svg width="100%" height="100%" viewBox="0 0 100 100"
    +
    <svg width="100%" height="100%" viewBox="0 0 100 100"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink">
       <image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" />
    @@ -33,7 +33,7 @@ translation_of: Web/SVG/Element/image
      
  • Attributs noyau »
  • Attributs d'événement graphique »
  • Attributs Xlink »
  • -
  • Attributs de présentation »
  • +
  • Attributs de présentation »
  • {{ SVGAttr("class") }}
  • {{ SVGAttr("style") }}
  • {{ SVGAttr("externalResourcesRequired") }}
  • diff --git a/files/fr/web/svg/element/index.html b/files/fr/web/svg/element/index.html index 730456be9f..1b01700206 100644 --- a/files/fr/web/svg/element/index.html +++ b/files/fr/web/svg/element/index.html @@ -11,13 +11,10 @@ tags: - 'l10n:priority' translation_of: Web/SVG/Element --- -

    « SVG / Référence des attributs SVG »

    - -

    Les dessins et les images SVG sont créés à l'aide d'un large éventail d'éléments dédiés à la construction, au dessin et à la mise en page d'images vectorielles et de diagrammes. Vous trouverez ici la documentation de référence pour chacun des éléments SVG.

    +

    Les dessins et les images SVG sont créés à l'aide d'un large éventail d'éléments dédiés à la construction, au dessin et à la mise en page d'images vectorielles et de diagrammes. Vous trouverez ici la documentation de référence pour chacun des éléments SVG.

    Éléments SVG de A à Z

    -

    A

      @@ -170,7 +167,6 @@ translation_of: Web/SVG/Element
      • {{SVGElement("view")}}
      -

    Les éléments SVG par catégories

    @@ -248,8 +244,8 @@ translation_of: Web/SVG/Element

    Élements obsolètes et dépréciés

    -
    -

    Les éléments ci-dessous sont dépréciés et ne doivent pas être utilisés. Vous ne devez absolument pas les utiliser dans des nouveux projets, et vous devez dans la mesure du possible les remplacer dans les vieux projets. Ils sont listés là uniquemnt à titre informatif.

    +
    +

    Attention : Les éléments ci-dessous sont dépréciés et ne doivent pas être utilisés. Vous ne devez absolument pas les utiliser dans des nouveux projets, et vous devez dans la mesure du possible les remplacer dans les vieux projets. Ils sont listés là uniquemnt à titre informatif.

    A

    diff --git a/files/fr/web/svg/element/line/index.html b/files/fr/web/svg/element/line/index.html index c80dd0aeed..d5adf5895e 100644 --- a/files/fr/web/svg/element/line/index.html +++ b/files/fr/web/svg/element/line/index.html @@ -18,17 +18,18 @@ translation_of: Web/SVG/Element/line

    {{svginfo}}

    -

    Exemple

    +

    Exemple

    -

    » line.svg

    + -

    Vous pouvez aussi appliquer une transformation pour avoir le même résultat. En commençant avec une ligne normale,

    +
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    +  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
     
    -

    » line1.svg

    + <!-- Si on n'indique pas stroke, la ligne de couleur + ne sera pas visible --> +</svg>
    -

    ajoutez des options de transformation pour changer la direction de la ligne :

    - -

    » line2.svg

    +

    {{EmbedLiveSample('exemple', 100, 100)}}

    Attributs

    diff --git a/files/fr/web/svg/element/lineargradient/index.html b/files/fr/web/svg/element/lineargradient/index.html index 11fc7a2c6f..8dfa75792d 100644 --- a/files/fr/web/svg/element/lineargradient/index.html +++ b/files/fr/web/svg/element/lineargradient/index.html @@ -60,7 +60,7 @@ translation_of: Web/SVG/Element/linearGradient x="10" y="10" width="100" height="100"/> </svg>
    -

    {{EmbedLiveSample("Exemple", 120, 120, "https://mdn.mozillademos.org/files/10061/svg-lineargradient.png")}}

    +

    {{EmbedLiveSample("Exemple", 120, 120)}}

    Spécifications

    diff --git a/files/fr/web/svg/element/marker/index.html b/files/fr/web/svg/element/marker/index.html index 6c505e5147..6392f684b3 100644 --- a/files/fr/web/svg/element/marker/index.html +++ b/files/fr/web/svg/element/marker/index.html @@ -12,10 +12,9 @@ translation_of: Web/SVG/Element/marker

    Les marqueurs sont attachés aux formes à l'aide des propriétés {{SVGAttr("marker-start")}}, {{SVGAttr("marker-mid")}}, et {{SVGAttr("marker-end")}}.

    -
    - +

    Exemple

    + +
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
       <defs>
    @@ -42,8 +41,7 @@ translation_of: Web/SVG/Element/marker
        marker-start="url(#dot)" marker-mid="url(#dot)"  marker-end="url(#dot)" />
     </svg>
    -

    {{EmbedLiveSample('Exemple', 200, 200)}}

    -
    +

    {{EmbedLiveSample('exemple', 200, 200)}}

    Attributs

    diff --git a/files/fr/web/svg/element/mask/index.html b/files/fr/web/svg/element/mask/index.html index b771cc8724..20f0088b0d 100644 --- a/files/fr/web/svg/element/mask/index.html +++ b/files/fr/web/svg/element/mask/index.html @@ -15,10 +15,9 @@ translation_of: Web/SVG/Element/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.

    -
    - +

    Exemple

    + +
    <svg viewBox="-10 -10 120 120">
       <mask id="myMask">
    @@ -35,13 +34,12 @@ translation_of: Web/SVG/Element/mask
       <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
     </svg>
    -

    {{EmbedLiveSample('Example', 100, 100)}}

    -
    +

    {{EmbedLiveSample('exemple', 100, 100)}}

    Attributs

    -
    {{SVGAttr("height")}}
    +
    {{SVGAttr("height")}}
    Définit la hauteur du masque.
    Valeur: <length> ; Valeur par défaut: 120%; Animation: oui
    {{SVGAttr("maskContentUnits")}}
    @@ -50,13 +48,13 @@ translation_of: Web/SVG/Element/mask
    {{SVGAttr("maskUnits")}}
    Définit le système de coordonnées pour les attributs {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}} et {{SVGAttr("height")}} du <mask>.
    Valeur: userSpaceOnUse|objectBoundingBox ; Valeur par défaut: objectBoundingBox; Animation: oui
    -
    {{SVGAttr("x")}}
    +
    {{SVGAttr("x")}}
    Définit la coordonnée de l'axe x du coin supérieur gauche du masque.
    Valeur: <coordinate> ; Valeur par défaut: -10%; Animation: oui
    -
    {{SVGAttr("y")}}
    +
    {{SVGAttr("y")}}
    Définit la coordonnée de l'axe y du coin supérieur gauche du masque.
    Valeur: <coordinate> ; Valeur par défaut: -10%; Animation: oui
    -
    {{SVGAttr("width")}}
    +
    {{SVGAttr("width")}}
    Définit la largeur du masque.
    Valeur: <length> ; Valeur par défaut: 120%; Animation: oui
    diff --git a/files/fr/web/svg/element/path/index.html b/files/fr/web/svg/element/path/index.html index c2ecfd5096..9727d692be 100644 --- a/files/fr/web/svg/element/path/index.html +++ b/files/fr/web/svg/element/path/index.html @@ -15,7 +15,7 @@ translation_of: Web/SVG/Element/path

    Exemple

    -
    <?xml version="1.0" standalone="no"?>
    +
    <?xml version="1.0" standalone="no"?>
     <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
       "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
     <svg width="100%" height="100%" viewBox="0 0 400 400"
    @@ -50,7 +50,7 @@ translation_of: Web/SVG/Element/path
     
     

    Interface DOM

    -

    Cet élément implémente l'interface SVGPathElement.

    +

    Cet élément implémente l'interface SVGPathElement.

    Compatibilité des navigateurs

    @@ -65,5 +65,5 @@ translation_of: Web/SVG/Element/path
  • {{ SVGElement("polygon") }}
  • {{ SVGElement("polyline") }}
  • {{ SVGElement("rect") }}
  • -
  • The MDN SVG "Getting Started" tutorial : Path
  • +
  • The MDN SVG "Getting Started" tutorial : Path
  • diff --git a/files/fr/web/svg/element/pattern/index.html b/files/fr/web/svg/element/pattern/index.html index 85628e4936..e15af97156 100644 --- a/files/fr/web/svg/element/pattern/index.html +++ b/files/fr/web/svg/element/pattern/index.html @@ -14,10 +14,9 @@ translation_of: Web/SVG/Element/pattern

    Le <pattern> est référéne par les attributs {{SVGAttr("fill")}} et {{SVGAttr("stroke")}} sur les autres éléments graphiques, pour appliquer un remplissage ou une bordure sur ces éléments avec le motif référencé.

    -
    - +

    Exemple

    + +
    <svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
       <defs>
    @@ -29,9 +28,8 @@ translation_of: Web/SVG/Element/pattern
       <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
       <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
     </svg>
    -
    -

    {{EmbedLiveSample('example', 150, '100%')}}

    +

    {{EmbedLiveSample('exemple', 150, '100%')}}

    Attributs

    @@ -43,41 +41,40 @@ translation_of: Web/SVG/Element/pattern
    Cet attribut référence un patron de motif qui fournit les valeurs par défaut des attributs de l'élément <pattern>.
    Type de valeur: <URL>; Valeur par défaut : none; Animable: yes
    {{SVGAttr("patternContentUnits")}}
    -
    Cet attribut définit le système de coordonnées pour le contenu de {{SVGElement("pattern")}}.
    - Type de valeur : userSpaceOnUse|objectBoundingBox; Valeur par défaut : userSpaceOnUse; Animable: yes -

    Note : Cet attribut n'a pas d'effet si l'attribut viewBox est définit sur l'élément <pattern>.

    +

    Cet attribut définit le système de coordonnées pour le contenu de {{SVGElement("pattern")}}. Type de valeur : userSpaceOnUse|objectBoundingBox; Valeur par défaut : userSpaceOnUse; Animable: yes

    +
    +

    Note : Cet attribut n'a pas d'effet si l'attribut viewBox est définit sur l'élément <pattern>.

    +
    {{SVGAttr("patternTransform")}}
    -
    Cet attribut contient la définition d'une transformation optionnelle supplémentaire du système de coordonnées du motif vers celui de la cible.
    - Type de valeur : <transform-list>; Valeur par défaut : none; Animatable: yes
    +

    Cet attribut contient la définition d'une transformation optionnelle supplémentaire du système de coordonnées du motif vers celui de la cible. Type de valeur : <transform-list>; Valeur par défaut : none; Animatable: yes

    {{SVGAttr("patternUnits")}}
    -
    Cet attribut définit le système de coordonnées pour les attributs x, y, width , et height.
    - Type de valeur : userSpaceOnUse|objectBoundingBox; Valeur par défaut : objectBoundingBox; Animable: yes
    +

    Cet attribut définit le système de coordonnées pour les attributs x, y, width , et height.Type de valeur : userSpaceOnUse|objectBoundingBox; Valeur par défaut : objectBoundingBox; Animable: yes

    {{SVGAttr("preserveAspectRatio")}}
    -
    Cet attribut définit comme le fragment SVG doit être déformé s'il est embarqué dans un conteneur avec un ratio d'aspect différent.
    - Type de valeur : (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Valeur par défaut : xMidYMid meet; Animable: yes
    +

    Cet attribut définit comme le fragment SVG doit être déformé s'il est embarqué dans un conteneur avec un ratio d'aspect différent. + Type de valeur : (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Valeur par défaut : xMidYMid meet; Animable: yes

    {{SVGAttr("viewBox")}}
    -
    Cet attribut définit les limites de la fenêtre de rendu du SVG pour le fragment du motif.
    - Type de valeur : <list-of-numbers> ; Valeur par défaut : none; Animable: yes
    +

    Cet attribut définit les limites de la fenêtre de rendu du SVG pour le fragment du motif.Type de valeur : <list-of-numbers> ; Valeur par défaut : none; Animable: yes

    {{SVGAttr("width")}}
    -
    Cet attribut détermine la largeur du motif de mosaïque.
    - Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animable: yes
    +

    Cet attribut détermine la largeur du motif de mosaïque.
    + Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animable: yes

    {{SVGAttr("x")}}
    -
    Cet attribut détermine le déplacement en coordonnée x du motif de mosaïque.
    - Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animatable: yes
    +

    Cet attribut détermine le déplacement en coordonnée x du motif de mosaïque.Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animatable: yes

    {{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
    Cet attribut référence un patron de motif qui fournit des valeurs par défaut pour les attributs du <pattern>.
    - Type de valeur : <URL>; Valeur par défaut : none; Animable: yes -

    Note : Pour les navigateurs implémentant href, si à la fois href et xlink:href sont définis, xlink:href sera ignoré et seulement href sera utilisé.

    + Type de valeur : <URL>; Valeur par défaut : none; Animable: yes

    +
    +

    Note : Pour les navigateurs implémentant href, si à la fois href et xlink:href sont définis, xlink:href sera ignoré et seulement href sera utilisé.

    +
    {{SVGAttr("y")}}
    -
    Cet attribut détermine le déplacement en coordonnée y du motif de mosaïque.
    - Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animable: yes
    -
    +

    Cet attribut détermine le déplacement en coordonnée y du motif de mosaïque. Type de valeur : <length>|<percentage> ; Valeur par défaut : 0; Animable: yes

    + -

    Attributs globaux

    +

    Attributs globaux

    - Attributs principaux +
    +
    Attributs principaux
    Plus notamment : {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
    Attributs de style
    {{SVGAttr('class')}}, {{SVGAttr('style')}}
    diff --git a/files/fr/web/svg/element/polygon/index.html b/files/fr/web/svg/element/polygon/index.html index e4981d0eb3..e410f82a01 100644 --- a/files/fr/web/svg/element/polygon/index.html +++ b/files/fr/web/svg/element/polygon/index.html @@ -13,10 +13,9 @@ translation_of: Web/SVG/Element/polygon

    L'élément <polygon> délimite une forme close composée d'un groupe de plusieurs segments de droites. Le dernier point est relié au premier afin de fermer la forme et de relier les traits entre deux. Pour créer une forme ouverte, voir l'élément {{SVGElement("polyline")}}.

    -
    - +

    Exemple

    + +
    <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
       <!-- Exemple d'un polygone avec le remplissage par défaut -->
    @@ -25,9 +24,8 @@ translation_of: Web/SVG/Element/polygon
       <!-- Le même polygone sans remplissage et avec un contour -->
       <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
     </svg>
    -
    -
    {{EmbedLiveSample('example', '100', '100')}}
    +

    {{EmbedLiveSample('exemple', '100', '100')}}

    Attributs

    diff --git a/files/fr/web/svg/element/radialgradient/index.html b/files/fr/web/svg/element/radialgradient/index.html index 41fd9ec42e..052f193b4a 100644 --- a/files/fr/web/svg/element/radialgradient/index.html +++ b/files/fr/web/svg/element/radialgradient/index.html @@ -20,9 +20,9 @@ translation_of: Web/SVG/Element/radialGradient

    Attributs globaux

      -
    • Attributs de base »
    • -
    • Références des attributs SVG »
    • -
    • Attributs Xlink »
    • +
    • Attributs de base »
    • +
    • Références des attributs SVG »
    • +
    • Attributs Xlink »
    • {{SVGAttr("class")}}
    • {{SVGAttr("style")}}
    • {{SVGAttr("externalResourcesRequired")}}
    • diff --git a/files/fr/web/svg/element/rect/index.html b/files/fr/web/svg/element/rect/index.html index 1ccebc8c09..aa18e5a282 100644 --- a/files/fr/web/svg/element/rect/index.html +++ b/files/fr/web/svg/element/rect/index.html @@ -17,9 +17,7 @@ translation_of: Web/SVG/Element/rect

      Exemple

      - +
      <svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
         <!-- Simple rect element -->
      @@ -59,7 +57,7 @@ translation_of: Web/SVG/Element/rect
       
       

      Interface DOM

      -

      Cet élément implémente l'interface SVGRectElement .

      +

      Cet élément implémente l'interface SVGRectElement .

      Compatibilité avec les navigateurs

      diff --git a/files/fr/web/svg/element/stop/index.html b/files/fr/web/svg/element/stop/index.html index f77d1b7f06..d5e19bfcff 100644 --- a/files/fr/web/svg/element/stop/index.html +++ b/files/fr/web/svg/element/stop/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Element/stop ---
      {{SVGRef}}
      -

      L'élément 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 <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

      @@ -16,8 +16,8 @@ translation_of: Web/SVG/Element/stop

      Attributs globaux

      @@ -60,7 +60,7 @@ translation_of: Web/SVG/Element/stop

      Résultat

      -

      {{EmbedLiveSample("Example", 160, 95)}}

      +

      {{EmbedLiveSample("Exemple", 160, 95)}}

      Spécifications

      diff --git a/files/fr/web/svg/element/style/index.html b/files/fr/web/svg/element/style/index.html index d7daa868fd..11454c2331 100644 --- a/files/fr/web/svg/element/style/index.html +++ b/files/fr/web/svg/element/style/index.html @@ -11,7 +11,7 @@ translation_of: Web/SVG/Element/style

      L'élément style permet d'intégrer directement des feuilles de style dans un contenu SVG. L'élément style de SVG possède les mêmes attributs que l'élément correspondant au format HTML (voir l'élément HTML {{HTMLElement("style")}}).

      -

      Contexte d'utilisation

      +

      Contexte d'utilisation

      {{svginfo}}

      @@ -33,7 +33,7 @@ translation_of: Web/SVG/Element/style </svg>
      -

      Résultat en direct:

      +

      Résultat en direct:

      {{EmbedLiveSample("Exemple",150,165)}}

      @@ -42,7 +42,7 @@ translation_of: Web/SVG/Element/style

      Attributs Globaux

      Attributs Specifiques

      @@ -55,7 +55,7 @@ translation_of: Web/SVG/Element/style

      Interface DOM

      -

      Cet élément implemente l'interface SVGStyleElement.

      +

      Cet élément implemente l'interface SVGStyleElement.

      Specifications

      @@ -88,5 +88,5 @@ translation_of: Web/SVG/Element/style

      Voir aussi

      diff --git a/files/fr/web/svg/element/svg/index.html b/files/fr/web/svg/element/svg/index.html index 7146137754..f2f257c15a 100644 --- a/files/fr/web/svg/element/svg/index.html +++ b/files/fr/web/svg/element/svg/index.html @@ -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 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 et système de coordonnée.

      Contexte d'utilisation

      @@ -48,11 +48,11 @@ translation_of: Web/SVG/Element/svg

      Attributs globaux

        -
      • Conditional processing attributes »
      • -
      • Core attributes »
      • -
      • Document event attributes »
      • -
      • Graphical event attributes »
      • -
      • Presentation attributes »
      • +
      • Conditional processing attributes »
      • +
      • Core attributes »
      • +
      • Document event attributes »
      • +
      • Graphical event attributes »
      • +
      • Presentation attributes »
      • {{SVGAttr("class")}}
      • {{SVGAttr("style")}}
      • {{SVGAttr("externalResourcesRequired")}}
      • @@ -75,7 +75,7 @@ translation_of: Web/SVG/Element/svg

        Interface DOM

        -

        Cette élément implémente l'interface SVGSVGElement.

        +

        Cette élément implémente l'interface SVGSVGElement.

        Spécifications

        diff --git a/files/fr/web/svg/element/switch/index.html b/files/fr/web/svg/element/switch/index.html index 4f93ae7f8a..60504ccf7a 100644 --- a/files/fr/web/svg/element/switch/index.html +++ b/files/fr/web/svg/element/switch/index.html @@ -34,7 +34,7 @@ translation_of: Web/SVG/Element/switch

        Interface DOM

        -

        Cet élément implémente l'interface SVGSwitchElement.

        +

        Cet élément implémente l'interface SVGSwitchElement.

        Exemple

        diff --git a/files/fr/web/svg/element/symbol/index.html b/files/fr/web/svg/element/symbol/index.html index 3c652df49b..66137a0100 100644 --- a/files/fr/web/svg/element/symbol/index.html +++ b/files/fr/web/svg/element/symbol/index.html @@ -12,10 +12,9 @@ translation_of: Web/SVG/Element/symbol

        L'utilisation d'éléments symbol pour les graphiques qui sont utilisés de multiples fois dans le même document permet d'améliorer la structure et la sémantique du document. Les documents fortement structurés peuvent plus facilement être rendus sous forme graphique, vocale, ou Braille, et ainsi favoriser leur accessibilité.

        -
        - +

        Exemple

        + +
        <svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink">
        @@ -36,7 +35,6 @@ translation_of: Web/SVG/Element/symbol
         </svg>

        {{EmbedLiveSample('Exemple', 150, '100%')}}

        -

        Attributs

        @@ -86,7 +84,9 @@ translation_of: Web/SVG/Element/symbol

        {{svginfo}}

        -

        Note: Un élément <symbol> n'est pas destiné à être affiché par lui-même. Seules les instances d'un élément <symbol> (c'est à dire une référence vers un <symbol> par un élément {{SVGElement("use")}}) sont affichées. Cela signifie que certains navigateurs peuvent refuser d'afficher directement un élément <symbol> quand bien même la propriété CSS {{cssxref('display')}} indique le contraire.

        +
        +

        Note : Un élément <symbol> n'est pas destiné à être affiché par lui-même. Seules les instances d'un élément <symbol> (c'est à dire une référence vers un <symbol> par un élément {{SVGElement("use")}}) sont affichées. Cela signifie que certains navigateurs peuvent refuser d'afficher directement un élément <symbol> quand bien même la propriété CSS {{cssxref('display')}} indique le contraire.

        +

        Spécifications

        diff --git a/files/fr/web/svg/element/text/index.html b/files/fr/web/svg/element/text/index.html index a7658a4f87..bc1e735223 100644 --- a/files/fr/web/svg/element/text/index.html +++ b/files/fr/web/svg/element/text/index.html @@ -71,10 +71,10 @@ translation_of: Web/SVG/Element/text

        Attributs globaux

          -
        • Conditional processing attributes »
        • -
        • Core attributes »
        • -
        • Graphical event attributes »
        • -
        • Presentation attributes »
        • +
        • Conditional processing attributes »
        • +
        • Core attributes »
        • +
        • Graphical event attributes »
        • +
        • Presentation attributes »
        • {{ SVGAttr("class") }}
        • {{ SVGAttr("style") }}
        • {{ SVGAttr("externalResourcesRequired") }}
        • @@ -96,7 +96,7 @@ translation_of: Web/SVG/Element/text

          Interface DOM

          -

          Cet élément implémente l'interface SVGTextElement.

          +

          Cet élément implémente l'interface SVGTextElement.

          Compatibilité des navigateurs

          diff --git a/files/fr/web/svg/element/title/index.html b/files/fr/web/svg/element/title/index.html index 90b1a44836..e2b24d2990 100644 --- a/files/fr/web/svg/element/title/index.html +++ b/files/fr/web/svg/element/title/index.html @@ -10,7 +10,7 @@ translation_of: Web/SVG/Element/title ---
          {{SVGRef}}
          -

          Tout élément graphique ou conteneur dans un dessin SVG peut définir un titre en utilisant un élément <title>, ce titre ne peut contenir que du texte.

          +

          Tout élément graphique ou conteneur dans un dessin SVG peut définir un titre en utilisant un élément <title>, ce titre ne peut contenir que du texte.

          Quand l'élément contenant un titre apparaît à l'utilisateur sous forme d'image, l'élément <title> n'est pas affiché. Néanmoins, quelques moteurs de rendu peuvent, par exemple, l'afficher sous forme d'infobulle. Des représentations alternatives sont possibles, visuelles ou auditives, en renplacement des éléments graphiques. De manière générale, cet élément améliore l'accessibilité des documents SVG.

          diff --git a/files/fr/web/svg/element/tspan/index.html b/files/fr/web/svg/element/tspan/index.html index 8221e0cc27..0c80f3a94e 100644 --- a/files/fr/web/svg/element/tspan/index.html +++ b/files/fr/web/svg/element/tspan/index.html @@ -16,19 +16,34 @@ translation_of: Web/SVG/Element/tspan

          {{svginfo}}

          -

          Exemple

          +

          Exemple

          -

          » tspan.svg

          + + +
          <svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg">
          +  <style>
          +    text  { font: italic 12px serif; }
          +    tspan { font: bold 10px sans-serif; fill: red; }
          +  </style>
          +
          +  <text x="10" y="30" class="small">
          +    Vous êtes
          +    <tspan>not</tspan>
          +    une banane !
          +  </text>
          +</svg>
          + +

          {{EmbedLiveSample('exemple', 100, '100%')}}

          Attributs

          Attributs globaux

            -
          • Attributs de traitement conditionnel »
          • -
          • Attributs de base »
          • -
          • Attributs d'évènements graphiques »
          • -
          • Attributs de présentation »
          • +
          • Attributs de traitement conditionnel »
          • +
          • Attributs de base »
          • +
          • Attributs d'évènements graphiques »
          • +
          • Attributs de présentation »
          • {{SVGAttr("class")}}
          • {{SVGAttr("style")}}
          • {{SVGAttr("externalResourcesRequired")}}
          • @@ -48,7 +63,7 @@ translation_of: Web/SVG/Element/tspan

            Interface DOM

            -

            Cet élément implémente l'interface SVGTSpanElement.

            +

            Cet élément implémente l'interface SVGTSpanElement.

            Spécifications

            diff --git a/files/fr/web/svg/element/use/index.html b/files/fr/web/svg/element/use/index.html index 7320a50611..fc4572cb94 100644 --- a/files/fr/web/svg/element/use/index.html +++ b/files/fr/web/svg/element/use/index.html @@ -5,14 +5,14 @@ translation_of: Web/SVG/Element/use ---
            {{SVGRef}}
            -

            L'élement <use> permet la duplication de nodes (noeuds du DOM, NDR) définis par <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 grâce à HTML5.
            +

            L'élement <use> permet la duplication de nodes (noeuds du DOM, NDR) définis par <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 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 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.

            + 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 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.

            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")}}.

            -

            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

            @@ -24,11 +24,11 @@ translation_of: Web/SVG/Element/use

            Attributs globaux

    -

    {{EmbedLiveSample("Example", 80, 80)}}

    +

    {{EmbedLiveSample("Exemple", 80, 80)}}

    Spécifications

    -- cgit v1.2.3-54-g00ecf