Élément <pattern> SVG

SVG peut utiliser l'élément <pattern> pour définir un motif. Il est utilisé pour remplir les éléments graphiques de manière à tapisser.

Pour remplir ou dessiner un objet avec une forme prédéfinie, il faut utiliser l'élément pattern. L'élément pattern permet aux graphismes prédéfinis de se répeter à intervalles fixes sur les axes x et y, couvrant ainsi la zone à peindre. D'abord, définissez le motif avec l'élément pattern, puis utilisez les attributs fill ou stroke sur l'élément graphique donné pour faire référence au motif à remplir ou dessiner.

<svg　width="120"　height="120"　viewBox="0　0　120　120"　　　　
xmlns="http://www.w3.org/2000/svg"　version="1.1"　　　　
xmlns:xlink="http://www.w3.org/1999/xlink">　　　　
<defs>　　　　
<pattern　id="Triangle"　width="10"　height="10"　patternUnits="userSpaceOnUse">　　　　
<polygon　points="5,0　10,10　0,10"/>　　　　
　　　　</pattern>　　　　
</defs>　　　　
<circle　cx="60"　cy="60"　r="50"　　fill="url(#Triangle)"/>　　　　
</svg>

L'effet de exécution est comme suit:

Explication de l'utilisation

• L'attribut id du <pattern> définit le nom unique du motif.

• patternUnits est utilisé pour définir les attributs de largeur, hauteur, largeur et hauteur.

• cx et cy sont les coordonnées x et y de la boîte de contour du motif.