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

<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

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

Spécifications

Compatibilité des navigateurs