<pattern>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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>|<pourcentage>; Valeur par défaut : 0; Animable : oui
href: 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
patternContentUnits: 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: 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
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
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> ; Valeur par défaut : none; Animable: yes
width: Cet attribut détermine la largeur du motif de mosaïque. Type de valeur : <length>|<percentage> ; 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>|<percentage> ; Valeur par défaut : 0; Animatable: yes
xlink:href 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>; 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: 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 principaux: Plus notamment : id, tabindex
Attributs de style: class, style
Attributs de traitement conditionnel: Plus notamment : requiredExtensions, systemLanguage
Attributs de présentation: Plus notamment : clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
Attributs XLink: Plus notamment : xlink:title

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 dégradés Éléments de formes Éléments structurels `<a>`, `<clipPath>`, `<filter>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # PatternElement

Compatibilité des navigateurs

BCD tables only load in the browser