Motif de remplissage SVG

Les motifs de remplissage SVG sont utilisés pour remplir les formes avec des motifs composés d'images. Ce motif peut être composé d'images SVG (formes) ou d'images bitmap. Le motif de remplissage SVG ressemble à ce à quoi vous êtes habitué dans Photoshop, appelé "tapisserie".

Exemple de motif de remplissage

C'est un exemple simple de motif de remplissage SVG :

<svg width="500" height="150">
　　　　<defs>
　　　　　　　　<pattern id="pattern"1" x="10"　y="10"　width="20"　height="20" patternunits="userSpaceOnUse">
　　　　　　　　　　　　<circle　cx="10"　cy="10"　r="10" style="stroke:　none;　fill:　#0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100" style="stroke: #000000; fill: url(#pattern1);"></rect>
</svg>

Tout d'abord, définissez l'élément <pattern> à l'intérieur de l'élément <defs>. Le motif contient un élément circle. Cet élément circle sera utilisé comme motif de remplissage.

Ensuite, dans les attributs CSS<rect>Déclarez un élémentfill, l'élément de référence<pattern>sonstyleID de l'élément dans les attributs.

Ensuite, déclarez un élément <rect>, qui fait référence à l'ID de l'élément <pattern> dans les attributs de style de son attribut fill CSS.

Effet d'image après l'exécution :

Notez la manière dont le cercle défini dans l'élément <pattern> est utilisé comme remplissage de rectangle. En outre, notez comment les cercles se répètent de gauche à droite, de haut en bas.

X, Y, largeur et hauteur

Les attributs x et y de l'élément <pattern> définissent la distance où le motif commence dans la forme de l'élément <pattern>.

Les attributs width et height de l'élément <pattern> définissent la largeur et la hauteur du motif.

C'est un exemple de départ, et il continueraxetydéfini sur 0 :}}

<svg width="500" height="150">
　　　　<defs>
　　　　　　　　<pattern id="pattern"2"
　　　　　　　　　　　　　　　　　x="0" y="0" width="20"　height="20"
　　　　　　　　　　　　　　　　　patternUnits="userSpaceOnUse"
　　　　　　　　<circle　cx="10"　cy="10"　r="10" style="stroke:　none;　fill:　#0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100"
　　　　　　　　　　style="stroke:　#000000;　fill:　url(#pattern"2);"　/>
</svg>

Effet d'image après l'exécution :

Notez que maintenant le motif commence au centre du cercle (en haut et à gauche du rectangle). Lorsque vous créez votre propre motif de remplissage, vous utiliserezxetyles valeurs des attributs pour obtenir l'effet souhaité.

widthetheightles dimensions du motif définies par l'attribut.

Dans l'exemple précédentwidth,heightils sont tous définis sur20, c'est-à-dire le diamètre du cercle. Par conséquent, les cercles se répètent à l'infini sans espace.

Dans cet exemple, la largeur du motif (width) est définie sur25au lieu de20. Notez que maintenant il y a5espaces de pixels.

C'est aussi unheightréglé sur25 Exemple :

Voici le même exemple, mais avec x et y définis sur10 (Le centre du cercle à l'intérieur de l'élément <pattern>):

Maintenant, le motif commence par un cercle complet, mais il reste encore de l'espace vertical et horizontal en trop.

Motif encastré

Il est possible d'encastrer des motifs de remplissage pour que le motif de remplissage utilise un autre motif de remplissage en interne. Voici un exemple où un rectangle utilise un cercle comme motif de remplissage. À l'intérieur du cercle, un rectangle est utilisé comme motif de remplissage.

<svg width="500" height="150">　　　　
<defs>　　　　
<pattern id="innerPattern"　　　　
x="3"　y="3"　width="9" height="9"　　　　
patternUnits="userSpaceOnUse"　　　　
>　　　　
<rect x="0" y="0" width="6" height="6"　　　　
style="stroke:　none;　fill:　#ff0000;"　/>　　　　
</pattern>　　　　
<pattern id="outerPattern"　　　　
x="12"　y="12"　width="25" height="25"　　　　
patternUnits="userSpaceOnUse"　　　　
>　　　　
<circle　cx="10"　cy="10"　r="10" style="stroke:　#0000ff;　fill:　url(#innerPattern)"　/>　　　　
</pattern>　　　　
</defs>　　　　
<rect　x="10"　y="10"　width="100"　height="100"　　　　
style="stroke:　#000000;　fill:　url(#outerPattern);"　/>　　　　
</svg>

Effet d'image après l'exécution :

Comme vous pouvez le voir, le rectangle externe est maintenant rempli par un cercle, et le cercle est à son tour rempli par un rectangle.

Transformation du motif

Vous pouvez utiliser les fonctions de transformation standard SVG pour convertir les motifs de remplissage. Vous pouvez utiliser l'attribut patternTransform pour cela. Voici un exemple de transformation de motif SVG :

<svg width="500" height="150">　　　　
<defs>　　　　
<pattern id="transformedPattern"　　　　
x="10"　y="10"　width="20"　height="20"　　　　
patternUnits="userSpaceOnUse"　　　　
patternTransform="rotate(35)"　　　　
>　　　　
<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#0000ff"　/>　　　　
</pattern>　　　　
</defs>　　　　
<rect　x="10"　y="10"　width="100"　height="100"　　　　
style="stroke:　#000000;　fill:　url(#transformedPattern);"　/>　　　　
</svg>

Ce exemple définit un motif simple, qui est tourné avant d'être utilisé comme motif de remplissage de rectangle35Effet d'image après exécution :