Dans cet article
La balise <pattern> est utilisée en SVG pour définir un motif (pattern) répétable qui peut être appliqué comme remplissage ou contour à d'autres éléments graphiques.
Elle permet de créer des designs complexes en répétant des formes, des images ou des motifs.
Structure et syntaxe de la balise <pattern>
Structure
Voici un exemple de base :
HTML
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="dots" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="2" fill="blue" />
</pattern>
</defs>
<rect x="0" y="0" width="200" height="200" fill="url(#dots)" />
</svg>Dans cet exemple :
- La balise
<pattern>définit un motif appelédotsavec son attributid; - Le motif est un cercle bleu de rayon 2 (
r) qui se répète tous les 10 pixels en largeur et en hauteur ; - Ce motif est appliqué comme remplissage à un rectangle avec
fill="url(#dots)".
Voici notre rendu :
Attributs de la balise <pattern>
La balise <pattern> prend en charge plusieurs attributs :
| Attribut | Description |
|---|---|
id | Identifiant unique du motif, utilisé pour le référencer avec fill="url(#id)" ou stroke="url(#id)". |
width, height | Dimensions du motif (par défaut en pixels). |
x, y | Position initiale du motif. |
patternUnits | Système de coordonnées du motif (userSpaceOnUse ou objectBoundingBox). |
patternContentUnits | Définit le système de coordonnées pour les éléments enfants du motif (userSpaceOnUse ou objectBoundingBox). |
viewBox | Définit une boîte de vue pour le motif, utile pour redimensionner les motifs. |
preserveAspectRatio | Détermine comment redimensionner le motif si ses proportions ne correspondent pas à l'élément auquel il est appliqué. |
Compatibilité des navigateurs
La balise <pattern> est largement prise en charge par tous les navigateurs modernes.
| Navigateur | Compatibilité |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Internet Explorer | Partielle (9+) |