SVG : balise pattern

Nous savons 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 le chapitre suivant que l'on peut remplir une forme avec un fond dégradé.

Le motif est un groupe de formes définies

Le code SVG correspondant

<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 la balise double pattern et identifiés motif1 et motif2.
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 et 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 doivent être exprimées en pourcentage.

La zone de dessin est divisée en deux rectangles. Le premier rectangle (partie gauche de la zone de dessin) est rempli avec motif1 : < rect fill = "url(#motif1)" ...
tandis que le deuxième rectangle (partie droite de la zone SVG) est rempli avec motif2 : < rect fill = "url(#motif2)"...

Motif basé sur une image existante

Le code SVG correspondant

<svg viewBox ="0 0 800 200" style = 'background : aqua' > <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>

Dans la balise SVG et grâce à l'attribut viewBox les attributs width, height deviennent facultatifs.

Le motif de remplissage d'une forme peut être une image existante. Ici 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.
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%"

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

<svg viewBox ="0 0 800 400" style = 'background : aqua' > <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>

On peut exprimer les dimensions d'une forme en pourcentages des dimensions du canevas. C'est le cas ici du rectangle 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"

Un rectangle occupant toute la zone de dessin SVG a pour fond la répététion du motif "couple" conformément au mode de duplication défini dans le conteneur pattern.


Retour menu