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 attributsfill etstroke 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%;}

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">  <defs>    <pattern 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'attributviewBox 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 attributsx,y,width , etheight.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:hrefObsolè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émentanthref, si à la foishref etxlink:href sont définis,xlink:href sera ignoré et seulementhref 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

Spécifications

Compatibilité des navigateurs