SVG 填充图案

Il modello di riempimento SVG viene utilizzato per riempire le forme con un disegno composto da immagini. Il disegno può essere composto da immagini SVG (forme) o immagini bitmap. Il modello di riempimento SVG sembra quello a cui si abitua in Photoshop e simili, chiamato "tessellazione".

Esempio di modello di riempimento

Questo è un esempio semplice di modello di riempimento SVG:

<svg　width="500"　height="150">
　　　　<defs>
　　　　　　　　<pattern id="pattern1" 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>

Prima, all'interno dell'elemento <defs> definire l'elemento <pattern>. Il disegno contiene un elemento circle. Questo elemento circle sarà utilizzato come pattern di riempimento.

In secondo luogo, nell'attributo CSS<rect>Dichiarare un elementofill, che si riferisce<pattern>ilstyleID dell'elemento.

In secondo luogo, dichiarare un elemento <rect> che si riferisce all'ID del <pattern>elemento nel suo attributo di stile CSS.

Effetto dell'immagine dopo l'esecuzione:

Attenzione all'uso del cerchio definito nel <pattern>elemento come riempimento del rettangolo. Inoltre, notare come i cerchi si ripetono da sinistra a destra e da alto in basso.

X, Y, larghezza e altezza

attributi x e y del <pattern>elemento definiscono la distanza iniziale nel <pattern>elemento della forma.

<pattern>elemento definito width e height attributi definiscono la larghezza e altezza del disegno.

Questo è un esempio che parte da zero exeyimpostare a 0:

<svg　width="500"　height="150">
　　　　<defs>
　　　　　　　　<pattern id="pattern2"
　　　　　　　　　　　　　　　　　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(#pattern2);" />
</svg>

Effetto dell'immagine dopo l'esecuzione:

Nota come il modello inizi dal centro del cerchio (in alto e a sinistra del rettangolo). Creando i tuoi modelli di riempimento, utilizzeraixeyvalori degli attributi per ottenere l'effetto desiderato.

larghezzaealtezzaimpostano le dimensioni di larghezza e altezza del modello.

Nell'esempio precedentelarghezza,altezzaSono tutti impostati a 20, ossia il diametro del cerchio. Pertanto, i cerchi si ripetono una dopo l'altra senza spazi vuoti.

In questo esempio, l'altezza del modello (larghezza) è impostata a 25, non a 20. Nota che ora ci sono 5 pixel di intervallo tra i cerchi orizzontali.

Questo è anche unaltezzaEsempio con impostazione a 25:

Di seguito è lo stesso esempio, ma con x e y impostati a 10 (centro del cerchio dell'elemento <pattern>):

Ora, il modello inizia da un cerchio completo, ma c'è ancora spazio verticale e orizzontale in eccesso.

Modello nidificato

È possibile nestingare modelli di riempimento in modo che il modello di riempimento interno utilizzi un altro modello di riempimento. Questo è un esempio di un rettangolo che utilizza un cerchio come modello di riempimento. All'interno del cerchio viene utilizzato un rettangolo come modello di riempimento.

<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>

Effetto dell'immagine dopo l'esecuzione:

Come puoi vedere, il rettangolo esterno è ora riempito con un cerchio, e il cerchio è riempito con un rettangolo.

Trasformazione del modello

È possibile trasformare i modelli di riempimento utilizzando le funzioni di trasformazione standard SVG. Puoi farlo tramite l'attributo patternTransform. Ecco un esempio di trasformazione del modello 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>

本示例定义了一个简单的图案，该图案在用作矩形的填充图案之前旋转了35度。运行后图像效果：