Elemento <pattern> SVG

SVG può utilizzare l'elemento <pattern> per definire un modello. Serve per riempire gli elementi grafici in modo ripetitivo.

Per riempire o contornare un oggetto con grafici predefiniti, è necessario utilizzare l'elemento pattern. L'elemento pattern consente ai grafici predefiniti di essere ripetuti (o ripetuti) in intervalli fissi lungo l'asse x e l'asse y, coprendo così l'area da colorare. Prima di tutto, definire il disegno utilizzando l'elemento pattern, quindi utilizzare le proprietà fill o stroke per applicare il disegno utilizzato per riempire o contornare.

<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'effetto del runtime è come segue:

Spiegazione dell'uso

• L'attributo id del <pattern> definisce il nome unico del modello.

• patternUnits viene utilizzato per definire le proprietà di larghezza, altezza, larghezza e altezza.

• cx e cy sono le coordinate dell'asse x e y del riquadro di confine del disegno.