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

html, body, svg { height: 100% }
<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 depuis SVG 2
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

Global attributes

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

Contexte d'utilisation

Interface DOM 

Cet élement implémente l'interface SVGPatternElement.

Spécifications

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !
Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple ? ? ? ? ?
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? ? ? ? ?