SVG : balise pattern

Nous savons déjà remplir une forme avec une couleur unie (plus ou moins opaque).
Nous allons voir maintenant que l'on peut remplir une forme avec un motif préalablement défini. Bref produire un fond tel un papier peint. Et nous verrons dans la page suivante que l'on peut remplir une forme avec un fond dégradé.

Un motif est une forme (ou groupe de formes) contenue dans un rectangle et qui se répète dans toute la zone cible.
Un motif peut être aussi une image matricielle importée (ou un groupe d'images).
Avant d'utiliser un motif pour remplir une zone du canevas SVG il faut le définir.

Exemple 1 : le motif est un groupe de formes

Le code SVG correspondant (extraits)

<svg viewBox ="0 0 800 200" width="100%" height="auto" > <defs> <pattern id="motif1" x="0" y="0" patternUnits="userSpaceOnUse" width="50" height="50" > <ellipse fill='red' cx="25" cy="20" rx="20" ry="15" /> <circle fill = 'olive' cx="25" cy="20" r = '10' /> </pattern> <pattern id="motif2" x="0" y="0" patternUnits="objectBoundingBox" width="20%" height="25%"> <rect x = '0' y = '0' width = '50' height = '50' fill = 'none' /> <ellipse fill='red' cx="25" cy="20" rx="20" ry="15" /> <circle fill = 'olive' cx="25" cy="20" r = '10' /> </pattern> </defs> <rect x="0" y="0" width="400" height="200" fill = "url(#motif1)" stroke-width ='1px' stroke ='black' /> <rect x="400" y="0" width="400" height="200" fill = "url(#motif2)" stroke-width ='1px' stroke ='black' /> </svg>

Dans cette page nous définissons deux motifs (donc dans le conteneur defs) avec le conteneur pattern et identifiés respectivement motif1 et motif2.

L'attribut ID est obligatoire. Vous allez comprendre pourquoi bientôt. Un peu de patience.
Ces deux motifs sont pratiquement identiques : un carré de 50 par 50 contenant une ellipse. Cette ellipse contenant elle-même un cercle de couleur "olive".

La seule différence entre les deux motifs est la valeur des attributs patternUnits, width, height.
Ces trois attributs précisent le mode de répétition du motif dans la forme cible.

Pour le premier motif nous avons pour ces trois attributs respectivement les valeurs userSpaceOnUse, 50 et 50 (50 pixels bien sûr ...). Ce qui veut dire que le motif sera répété tous les 50 pixels dans la zone cible.
Pour le deuxième motif et pour les mêmes attributs nous avons les valeurs : objectBoundingBox, 20% et 25%. Ce qui veut dire que le motif sera dupliqué tous les 20% en largeur et 25% en hauteur. Donc 5 fois en largeur et 4 fois en hauteur.

Attention dès que l'attribut patterUnits a pour valeur objectBoundindBox les valeurs des attributs width et height de la balise pattern doivent être exprimées en pourcentage.

Il faut maintenant utiliser ces deux motifs pour remplir des rectangles.
Le canevas SVG est en effet divisé en deux rectangles.
Le premier rectangle (partie gauche de la zone de dessin) est rempli avec motif1 : < rect fill = "url(#motif1)" ...
Le deuxième rectangle (partie droite du canevas) est rempli avec motif2 : < rect fill = "url(#motif2)"...
Donc je pense que vous avez compris pourquoi il faut non seulement définir un motif mais aussi l'identifier.

Motif basé sur une image existante

Un motif peut être une image matricielle ou un groupe d'images !

Le code SVG correspondant

... <defs> <pattern id="plongeur1" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100" > <image x="0" y="0" width="100" height="100" xlink:href="../images/plongeur3.gif" /> </pattern> <pattern id="plongeur2" patternUnits="objectBoundingBox" x="0" y="0" width="25%" height="100%" > <image x="0" y="0" width="100" height="100" xlink:href="../images/plongeur3.gif" /> </pattern> </defs> <rect x="0" y="0" width="800" height="100" fill = "url(#plongeur1)" /> <rect x="0" y="100" width="800" height="100" fill = "url(#plongeur2)" /> </svg>

On définit un motif identifié "plongeur1" qui a une taille de 100 par 100. Et à l'intérieur du conteneur pattern on utilise la balise isolée image pour importer une image matricielle. La valeur de l'attribut xlink:href doit être le chemin relatif vers l'image.
On définit un deuxième motif identifié "plongeur2" qui correspond aussi à une image existante et qui a une taille également de 100 par 100

Les deux motifs se distinguent par le mode de répétition du motif dans la zone cible. Voir page précédente !
Premier motif répété tous les 100px en largeur et tous les 100px en hauteur : ...patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"
Deuxième motif répété 4 fois en largeur et 1 fois en hauteur : ...patternUnits="objectBoundingBox" x="0" y="0" width="25%" height="100%"

Il faut maintenant utiliser ces motifs pour remplir deux rectangles.

Un rectangle qui occupe la moitié haute de la zone de dessin a pour fond le motif identifié "plongeur1" :
<rect... fill = "url(#plongeur1)" ... .
Un rectangle qui occupe la moitié basse de la zone de dessin a pour fond le motif identifié "plongeur2" :
<rect ... fill = "url(#plongeur2)" ...

Motif défini à partir de plusieurs images

Le code SVG correspondant

... <defs> <pattern id="couple" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="100" > <image x="0" y="0" width="100" height="100" xlink:href="../images/plongeur2.gif" /> <image x="100" y="0" width="100" height="100" xlink:href="../images/plongeur3.gif" /> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill = "url(#couple)" /> </svg>

Rappel : on peut exprimer les dimensions d'une forme en pourcentages des dimensions du canevas. C'est le cas ici du rectangle qui sera rempli avec le motif.

On définit un motif identifié couple composé de deux images existantes placées côte à côte (elles pourraient être l'une en dessous de l'autre).
Comme chaque image fait 100 par 100 le motif fait donc 200 par 100.
On demande que le motif soit répété tous les 200px en largeur et tous les 100px en hauteur : patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="100"
Retour menu