<pattern>
=========

L'élément **`<pattern>`** définit un objet graphique qui peut être redessiné à des intervalles de coordonnées x et y répétés ("en mosaïque") pour couvrir une surface.

Le **`<pattern>`** est référéne par les attributs `fill` et `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
-------
```

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



```html
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
    </pattern>
  </defs>

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

Attributs
---------

`height`

 Cet attribut détermine la hauteur du motif de mosaïque.
 *Type de valeur* : **<longueur>** (en-US)|**<pourcentage>** (en-US); *Valeur par défaut* : `0`; *Animable* : **oui**

`href (en-US)`

 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>** (en-US); *Valeur par défaut* : *none*; *Animable*: **yes**

`patternContentUnits (en-US)`

Cet attribut définit le système de coordonnées pour le contenu de `<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>`.

`patternTransform (en-US)`

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> (en-US)**; *Valeur par défaut* : *none*; *Animatable*: **yes**

`patternUnits (en-US)`

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

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

`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> (en-US)** ; *Valeur par défaut* : none; *Animable*: **yes**

`width`

 Cet attribut détermine la largeur du motif de mosaïque.
 *Type de valeur* : **<length>** (en-US)|**<percentage>** (en-US) ; *Valeur par défaut* : `0`; *Animable*: **yes**

`x`

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

`xlink:href (en-US)` 
Obsolète

 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>** (en-US); *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é.

`y (en-US)`

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

### Attributs globaux

Attributs principaux

Plus notamment : `id (en-US)`, `tabindex (en-US)`

Attributs de style
`class (en-US)`, `style`
Attributs de traitement conditionnel

Plus notamment : `requiredExtensions`, `systemLanguage (en-US)`

Attributs de présentation

Plus notamment : `clip-path`, `clip-rule (en-US)`, `color`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule`, `filter (en-US)`, `mask`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect (en-US)`, `visibility (en-US)`

Attributs XLink

Plus notamment : `xlink:title (en-US)`

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

|  |  |
| --- | --- |
| Catégories | Élément conteneur |
| Contenu autorisé | Tout élément de cette liste, quel qu'en soit l'ordre :Éléments d'animationÉléments descriptifsÉléments de formesÉléments structurelsÉléments de dégradés`<a>`, `<clipPath>`, `<color-profile>`, `<cursor>` (en-US), `<filter>`, `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>` (en-US), `<style>`, `<switch>`, `<text>`, `<view>` (en-US) |

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

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

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

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