recursal/MDN huggingface dataset:
Attributs d'événements des SVG
==============================

Tout attribut d'événement a un nom qui commence par "on" suivit du nom de l'événement auquel il est rattaché. Ces attributs spécifient quel script exécuter lorsque l'événement du type donné est déclenché sur l'élément.

SVG prend en charge tous les types d'événement pris en charge par le navigateur, en suivant les mêmes spécifications que les attributs d'événement HTML.

Les attributs d'événements globaux sont disponibles sur *tous les éléments SVG*. Les autres attributs d'événement sont disponible au cas par cas sur les différents éléments.

Tous les attributs d'événements *ne peuvent pas être animés.*

Attributs
---------

### Attributs d'événement d'animation

**`onbegin`**, **`onend`**, **`onrepeat`**

### Attributs d'événement du document

**`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`**

### Attributs d'événement des éléments du document

**`oncopy`**, **`oncut`**, **`onpaste`**

### Attributs d'événement globaux

**`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragexit`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`**

### Attributs d'événement graphiques

**`onactivate`**, **`onfocusin`**, **`onfocusout`**

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
stroke-dasharray
================

L'attribut **`stroke-dasharray`** est un attribut de présentation qui définit le motif des traits et des espaces utilisés pour dessiner le contour de la forme.

**Note :** Étant un attribut de présentation, `stroke-dasharray` peut être utilisé comme propriété CSS.

Cet attribut peut être utilisé avec les éléments SVG suivants :

* `<altGlyph>`
* `<circle>`
* `<ellipse>`
* `<path>`
* `<line>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>` (en-US)
* `<tref>` (en-US)
* `<tspan>`
Exemple
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
  <!-- Pas de tirets ou d'espaces -->
  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />

  <!-- Traits et espaces de même taille -->
  <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" />

  <!-- Traits et espaces de tailles différentes -->
  <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" />

  <!-- Traits et espaces de tailles différentes avec un nombre impair de valeurs -->
  <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" />

  <!-- Traits et espaces de tailles différentes avec un nombre pair de valeurs -->
  <line
 x1="0"
 y1="9"
 x2="30"
 y2="9"
 stroke="black"
 stroke-dasharray="4 1 2 3" />

  <!-- Traits commençant par un espace -->
  <line
 x1="0"
 y1="11"
 x2="30"
 y2="11"
 stroke="black"
 stroke-dasharray="0 4 0" />
</svg>
```

Notes d'utilisation
-------------------

|  |  |
| --- | --- |
| Valeur | `none` | `<dasharray>` |
| Valeur par défaut | `none` |
| Peut être animé | Oui |

`<dasharray>`

Une liste de valeurs `<length>` (en-US) et `<percentage>` (en-US), séparées par des espaces ou des virgules, qui indiquent les longueurs alternées des traits et des espaces.

Si un nombre impair de valeurs est fourni, la liste est répétée afin d'obtenir un nombre pair de valeur. Ainsi, `5,3,2` sera équivalent à `5,3,2,5,3,2`.

Spécifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeDashing |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
style
=====

L'attribut **`style`** définit les informations de style pour son élément. Il fonctionne de manière identique à l'attribut `style` en HTML.

Context d'utilisation
---------------------

|  |  |
| --- | --- |
| Catégories | Attribut de présentation |
| Valeur | <style> |
| Animation | Non |
| Document normatif | SVG 1.1 (2ème Edition) |

<style>

La syntaxe des données de style dépend du langage de la feuille de style. Par défaut, le langage est CSS.

**Note :** En théorie, l'attribut `contentStyleType` pourrait être utilisé pour spécifier un language de style autre que CSS, comme XSL(T). Cependant, cela n'a jamais été implémenté de manière satisfaisante dans les navigateurs, donc ne vous y fiez pas.

Exemple
-------

L'exemple suivant stylise le rectangle en utilisant l'attribut `style`, avec CSS comme langage de feuille de style.


```html
<svg viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg">
  <rect
 height="300"
 width="600"
 x="200"
 y="100"
 style="fill: red; stroke: blue; stroke-width: 3" />
</svg>
```

Éléments
--------

Les éléments suivants peuvent utiliser l'attribut `style`:

* Éléments conteneur »
* Éléments primitives de filtre »
* Éléments de dégradés »
* Éléments graphiques »
* Éléments structurels »
* Éléments de contenu textuel »
* `<clipPath>`
* `<filter>`
* `<font>` (en-US)
* `<foreignObject>`
* `<glyphRef>` (en-US)
* `<stop>`
* `<glyph>` (en-US)
Voir aussi
----------

* `<style>`
Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Attributs SVG de base
=====================

Les *attributs SVG de base* sont tous les attributs communs pouvant être spécifiés sur n'importe quel élément SVG.

* `id`
* `lang`
* `tabindex`
* `xml:base`
* `xml:lang`
* `xml:space`
Attributs
---------

`id (en-US)`

 Définit un identifiant (ID) qui doit être unique dans tout le document. Son but est d'identifier l'élément pour pouvoir y faire référence plus tard, comme identificateur de fragment, dans du code, ou pour appliquer du style (avec CSS).
 *Valuer*: Tout ID valide; *Animation*: **Non**

`lang (en-US)`

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

**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`.

*Valeur*: Tout ID de langage valide; *Animation*: **Non**

`tabindex (en-US)`

 L'attribut SVG tabindex permet de contrôler si un élément peut prendre le focus et définit l'ordre relatif des éléments pour la navigation via tabulation.
 *Type de valeur*: <integer> (en-US); *Animation*: **Non**

`xml:base (en-US)`

 Spécifie une IRI de base autre que celle du document.
 *Type de valeur*: <IRI> (en-US); *Animation*: **Non**

`xml:lang (en-US)`

C'est un attribut universel autorisé dans tous les documents XML pour définir le langage du texte présent dans l'élément. Son utilisation est presque identique à celle de l'attribut `lang` en HTML, hormis que les documents XML 1.0 ne permettent pas l'utilisation d'une valeur d'attribut nulle (`xml:lang=""`) pour indiquer un langage inconnu. À la place, utiliser `xml:lang="und"`.

**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`.

*Valeur*: Tout ID de langage valide; *Animation*: **Non**

`xml:space (en-US)` 
Obsolète

SVG prend en charge l'attribut XML standard `xml:space` pour spécifier le traitement des caractères d'espaces dans les données d'un élément `<text>` donné.

**Note :** Plutôt qu'utiliser l'attribut `xml:space` vous devriez utiliser la propriété CSS `white-space` à la place.

*Valeur*: **`default`** | `preserve`; *Animation*: **Non**

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
stroke-dashoffset
=================

L'attribut **`stroke-dashoffset`** décale la position de départ des pointillés sur les lignes SVG.

**Note :** `stroke-dashoffset` étant un attribut de présentation, il peut être utilisé comme propriété CSS.

Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: `<altGlyph>`, `<circle>`, `<ellipse>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>`, `<textPath>` (en-US), `<tref>` (en-US), and `<tspan>`

Exemple
-------
```

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 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é
 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" />

  <!--
 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)" />
</svg>
```

Notes d'usage
-------------

|  |  |
| --- | --- |
| Valeur | **<percentage>**
 |
 **<length>** |
| Valeur par défaut | `0` |
| Animation | Oui |

Le décalage est généralement exprimé en unités résolues par `pathLength (en-US)` mais si un <percentage> est utilisé, alors la valeur est résolue en pourcentage du viewport.

Spécifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeDashoffsetProperty |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
viewBox
=======

« Sommaire de la référence des attributs SVG

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

Contexte d'utilisation
----------------------

|  |  |
| --- | --- |
| Catégories | Aucune |
| Valeur | *Voir ci-dessus* |
| Animable | Oui |
| Document de norme | SVG 1.1 (2nd Edition) |

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 :

`<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 :

`<svg width="300" height="200" viewBox="0 0 30 20"></svg>`

Elements
--------

Les éléments suivants peuvent utiliser l'attribut `viewBox`

* `<svg>`
* `<symbol>`
* `<image>`
* `<marker>`
* `<pattern>`
* `<view>` (en-US)
Voir aussi
----------

* Introduction au SVG : Positionnement
cy
==

L'attribut **`cy`** définit la coordonnée de l'axe y pour le point central d'un élément.

Trois éléments utilisent cet attribut: `<circle>`, `<ellipse>`, et `<radialGradient>`

Exemple
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cy="25%" id="myGradient">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <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>
```

circle
------

Pour un élément `<circle>`, `cy` définit la coordonnée y de son centre.

|  |  |
| --- | --- |
| Valeur | **<length>**
 |
 **<percentage>** |
| Valeur par défaut | `0` |
| Animation | Oui |

**Note :** À partir de SVG2, `cy` est une *propriété de géométrie*, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.

ellipse
-------

Pour un élément `<ellipse>`, `cy` définit la coordonnée y de son centre.

|  |  |
| --- | --- |
| Valeur | **<length>**
 |
 **<percentage>** |
| Valeur par défaut | `0` |
| Animation | Oui |

**Note :** À partir de SVG2, `cy` est une *propriété de géométrie*, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.

radialGradient
--------------

Pour un élément `<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é (en-US) de **100%** corresponde au périmètre de ce plus grand cercle.

|  |  |
| --- | --- |
| Valeur | **<length>** |
| Valeur par défaut | `50%` |
| Animation | Oui |

#### Autre exemple
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cy="0" id="myGradient000">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="50%" id="myGradient050">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="100%" id="myGradient100">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect
 x="1"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient000)"
 stroke="black" />
  <rect
 x="13"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient050)"
 stroke="black" />
  <rect
 x="25"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient100)"
 stroke="black" />
</svg>
```

Spécifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CY |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCYAttribute |
stroke
======

L'attribut **`stroke`** définit la couleur (ou n'importe quelle méthode de remplissage, comme un gradient ou motif) a utiliser pour dessiner le contour d'une forme SVG.

**Note :** `stroke` étant un attribut de présentation, il peut être utilisé comme propriété CSS.

Cet attribut peut être appliqué à tout élément, en revanche il n'aura d'effet que sur les éléments suivants: `<altGlyph>`, `<circle>`, `<ellipse>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>`, `<textPath>` (en-US), `<tref>` (en-US), and `<tspan>`

Exemple
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple trait de couleur -->
  <circle cx="5" cy="5" r="4" fill="none" stroke="green" />

  <!-- Utiliser un degradé comme contour -->
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <circle cx="15" cy="5" r="4" fill="none" stroke="url(#myGradient)" />
</svg>
```

Notes d'usage
-------------

|  |  |
| --- | --- |
| Valeur | **<paint>** |
| Valeur par défaut | `none` |
| Animation | Oui |

Spécifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # SpecifyingStrokePaint |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

**Note :** Pour plus d'informations sur les valeurs de `context-stroke` (et `context-fill`) à partir de documents HTML, voir la documentation pour la propriété non-standard `-moz-context-properties`.
color
=====

L'attribut `color` est utilisé pour définir indirectement une valeur potentielle (`currentColor`) pour les attributs `fill`, `stroke`, `stop-color (en-US)`, `flood-color (en-US)` et `lighting-color (en-US)`.

**Note :** `color` étant un attribut de présentation, il peut être utilisé comme propriété CSS. Voir `CSS color` pour plus d'informations.

Contexte d'utilisation
----------------------

|  |  |
| --- | --- |
| Catégories | Attribut de présentation |
| Valeur | <color>
 | inherit
  |
| Animation | Yes |
| Document normatif | SVG 1.1 (2nd Edition) |

Exemple
-------


```html
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g color="green">
    <rect width="50" height="50" fill="currentColor" />
    <circle
 r="25"
 cx="70"
 cy="70"
 stroke="currentColor"
 fill="none"
 stroke-width="5" />
  </g>
</svg>
```

Éléments
--------

Les éléments suivants peuvent utiliser l'attribut `color`:

* Éléments de contenu textuel »
* Éléments de formes »
* `<stop>`
* `<feFlood>`
* `<feDiffuseLighting>`
* `<feSpecularLighting>`
Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
cx
==

L'attribut **`cx`** définit la coordonnée de l'axe x pour le point central d'un élément.

Trois éléments utilisent cet attribut: `<circle>`, `<ellipse>`, et `<radialGradient>`

Exemple
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cx="25%" id="myGradient">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="45" />
  <ellipse cx="150" cy="50" rx="45" ry="25" />
  <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
</svg>
```

circle
------

Pour un élément `<circle>`, `cx` définit la coordonnée x de son centre.

|  |  |
| --- | --- |
| Valeur | **<length>**
 |
 **<percentage>** |
| Valeur par défaut | `0` |
| Animation | Oui |

**Note :** À partir de SVG2, `cx` est une *propriété de géométrie*, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.

ellipse
-------

Pour un élément `<ellipse>`, `cx` définit la coordonnées x de son centre.

|  |  |
| --- | --- |
| Valeur | **<length>**
 |
 **<percentage>** |
| Valeur par défaut | `0` |
| Animation | Oui |

**Note :** À partir de SVG2, `cx` est une *propriété de géométrie*, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.

radialGradient
--------------

Pour un élément `<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é (en-US) à **100%** corresponde au périmètre de ce plus grand cercle.

|  |  |
| --- | --- |
| Valeur | **<length>** |
| Valeur par défaut | `50%` |
| Animation | Oui |

#### Autre exemple
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cx="0" id="myGradient000">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cx="50%" id="myGradient050">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cx="100%" id="myGradient100">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect
 x="1"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient000)"
 stroke="black" />
  <rect
 x="13"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient050)"
 stroke="black" />
  <rect
 x="25"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient100)"
 stroke="black" />
</svg>
```

Spécifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CX |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCXAttribute |
stroke-width
============

L'attribut **`stroke-width`** définit l'épaisseur du contour à appliquer à une forme SVG.

**Note :** `stroke-width` étant un attribut de présentation, il peut être utilisé comme propriété CSS.

Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: `<altGlyph>`, `<circle>`, `<ellipse>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>`, `<textPath>` (en-US), `<tref>` (en-US), et `<tspan>`

Exemple
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Épaisseur par défaut: 1 -->
  <circle cx="5" cy="5" r="3" stroke="green" />

  <!-- Définit l'épaisseur avec un nombre -->
  <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" />

  <!-- Définit l'épaisseur avec un pourcentage -->
  <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" />
</svg>
```

Notes d'usage
-------------

|  |  |
| --- | --- |
| Valeur | **<length>** |
 **<percentage>** |
| Valeur par défaut | `1px` |
| Animation | Oui |

**Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-width`, Cependant, ce n'est pas souvent pris en charge pour le moment (*voir la section 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 `viewBox` normalisée.

Spécifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeWidth |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.