<pattern>

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 :

<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é dots avec son attribut id ;
• 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 :

Exemple avancé

Voici un exemple plus complexe utilisant des formes et des couleurs :

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="diagonalStripes" width="10" height="10" patternUnits="userSpaceOnUse">
            <rect width="10" height="10" fill="lightgray" />
            <line x1="0" y1="10" x2="10" y2="0" stroke="red" stroke-width="2" />
        </pattern>
    </defs>

    <rect x="0" y="0" width="300" height="200" fill="url(#diagonalStripes)" />
</svg>

Dans cet exemple nous avons :

• Un motif avec des lignes diagonales rouges (<line>) est créé sur un fond gris clair (<rect> dans la balise <pattern>) ;
• Le motif est appliqué comme remplissage à un rectangle large avec fill sur la balise <rect>.

Essayez par vous-même :

<iframe height="300" style="width: 100%;" scrolling="no" title="Exemple d'utilisation pour la balise &lt;pattern&gt; avec HTML" src="https://codepen.io/believemy/embed/NPKoxBq?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">

Attributs de la balise <pattern>

La balise <pattern> prend en charge plusieurs attributs :

Compatibilité des navigateurs

La balise <pattern> est largement prise en charge par tous les navigateurs modernes.