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

* Some parts of this feature may have varying levels of support.

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

Notes d'utilisation

Spécifications

Specification
Scalable Vector Graphics (SVG) 2
# PatternElement

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
pattern
height
href
patternContentUnits
patternTransform
patternUnits
systemLanguage
width
x
xlink:href
Deprecated
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.