Tra i tag shape SVG, path è il più potente, e il mastering path è sufficiente per risolvere problemi comuni di disegno.
Diamo un'occhiata all'uso base del tag path:
<percorso d="M100,100 L200,200 L200,400" riempimento="#333" corsa="#000" />
Il tag path definisce il percorso attraverso la proprietà d, che definisce l'informazione costituita da una stringa, e il percorso può anche essere definito dagli attributi di riempimento e corsa per definire il riempimento e il bordo.
L'informazione dell'attributo d in realtà non è complicata, è composta da lettere e numeri, i numeri rappresentano i punti di coordinata e le lettere sono responsabili di come collegare questi punti di coordinata. Ad esempio, nell'esempio sopra, M rappresenta il punto di partenza e L rappresenta una connessione in linea retta, quindi l'informazione di d può essere interpretata così:
M100,100 -> inizia dal punto coordinato (100,100)
L200,200 -> Disegnate una linea retta da (100,100) a (200,200).
L200.400 -> Disegna una linea retta da (200.200) a (200.400).
Nell'attributo d del tag path ci sono in totale 10 comandi utilizzabili, e i seguenti 5 comandi sono basilari e relativamente semplici.
M si sposta verso (moveTo) coordinate del punto di partenza x,y
Il percorso chiuso Z collega i punti di inizio e fine del percorso in linea retta
L lineTo: Il nodo corrente è collegato in linea retta al nodo specificato (x,y)
La linea orizzontale H x mantiene costante la coordinata y del punto attuale, e l'asse x si sposta verso x, formando una linea orizzontale
V la linea verticale y mantiene invariate le coordinate x del punto corrente, e l'asse y si sposta su y, formando una linea verticale
M e L
Vediamo un altro esempio di M e L
<path d="M30,30 L170,30 L30,170 L170,170"></path>
Dal punto A (30, 30), la retta viene tracciata fino al punto B (170, 30), poi dritta al punto C (30, 170), e infine dritta al punto D (170, 170), formando infine un percorso a forma di Z.
Effetto di riempimento, e Z
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" riempire "giallo"></path>
In questa descrizione del percorso ci sono due M, quindi in un percorso compaiono due percorsi relativamente indipendenti, il primo percorso è lo stesso dell'esempio sopra, che ha la forma di Z.
Il secondo percorso è un rettangolo con il comando Z che appare nella descrizione, indicando che collega l'inizio e la fine del percorso.
Inoltre, qui definiamo la proprietà di riempimento per il cammino, e puoi vedere che il riempimento avrà effetto indipendentemente dal fatto che il percorso sia chiuso o meno.
H e V
Infine, diamo un'occhiata ai due comandi H e V, che in realtà sono l'abbreviazione del comando L quando l'asse x o y rimane invariato, quindi le due estremità successive sono descritte e l'immagine disegnata è la stessa.
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" riempire "giallo"></path>
<path d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" riempire "giallo"></path>
|
Pubblicato su 14/08/2017 13:15:15
|
|
|
