<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
<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: yesNote : 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
, 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: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: yesNote : Pour les navigateurs implémentant
href
, 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
- Attributs de 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 formes Éléments structurels Éléments de dégradés <a> , <clipPath> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
Spécifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # Patterns |
Compatibilité des navigateurs
BCD tables only load in the browser