Questa proprietà definisce un percorso.
uso
Attributi di definizione del percorso di categoria
valore
Variabilità Sì
Documentazione delle specifiche SVG 1.1 (2ª Edizione)
La proprietà d è in realtà una stringa che contiene una serie di descrizioni di cammino. Questi percorsi consistono nelle seguenti istruzioni:
- Moveto
- Lineto
- Curveto
- Arcto
- ClosePath
Questi sono combinati in una corda. Questi diversi comandi sono sensibili alla maiuscola; Un comando maiuscolo indica che i suoi parametri sono posizioni assolute, mentre i comandi minuscoli indicano un punto relativo alla posizione corrente. Un valore negativo può essere specificato come parametro per il comando: l'angolo negativo sarà in senso antiorario e le posizioni assolute x e y saranno considerate coordinate negative. Il valore relativo negativo x si sposterà a sinistra, mentre il valore relativo negativo y si sposterà verso l'alto.
Moveto
Il comando Moveto può essere pensato come prendere una penna da disegno e atterrare in un altro luogo. Non viene tracciato alcun segmento di linea tra il punto precedente e questo punto specificato. È una buona idea iniziare un percorso con un comando Moveto, perché senza un Moveto inizializzato, il punto di partenza sarà dove è avvenuta l'operazione precedente, il che può portare a comportamenti indeterminati.
Sintassi:
M x, y qui x e y sono coordinate assolute, rappresentando rispettivamente coordinate orizzontali e verticali.
m dx, dy qui dx e dy sono le distanze relative al punto attuale, rispettivamente a destra e in basso.
Esempio:
In posizione assoluta x=50, y= 100:<percorso d="M50,100..." />
Sposta 50 a destra, 100 giù: <percorso d="m50,100..." />
Lineto
A differenza del comando Moveto, il comando Lineto disegnerà un segmento dritto. Questo segmento di linea retta si sposta dalla posizione attuale alla posizione specificata. La sintassi del comando nativo Lineto è "L x, y" o "l dx, dy", dove x e y sono coordinate assolute, e dx e dy sono le distanze rispettivamente a destra e in basso. Ci sono anche le lettere H e V, che specificano rispettivamente i movimenti orizzontali e verticali. Hanno la stessa sintassi di L, e la loro versione minuscola è la distanza relativa, mentre la versione maiuscola è la posizione assoluta.
Curveto
Il comando Curvto specifica una curva di Bézier. Esistono due tipi di curve di Bézier: cubiche e quadratiche. Una curva di Bézier quadratica è una curva di Bézier cubica speciale in cui le due estremità del punto di controllo sono le stesse. La sintassi di una curva di Bézier quadratica è "Q cx, cy x, y" oppure "q dcx, dcy dx, dy". Cx e Cy sono entrambe coordinate assolute dei punti di controllo, mentre DCX e DCY sono le distanze dei punti di controllo rispettivamente nelle direzioni X e Y.
La curva di Bézier cubica segue lo stesso concetto della curva di Bézier quadratica, ma deve considerare due punti di controllo. La sintassi della curva cubica di Bézier è: "C c1x, c1y c2x, c2y x, y" oppure "c dc1x, dc1y dc2x, dc2y dx, dy", dove c1x, c1y e c2x, c2y sono rispettivamente le coordinate assolute dei punti di controllo dei punti di inizio e fine. DC1X, DC1Y e DC2X, DC2Y sono relativi al punto di partenza, non al punto finale. dx e dy sono rispettivamente le distanze a destra e verso il basso.
Per collegare curve di Bézier morbide, puoi anche usare i comandi T e S. La loro sintassi è più semplice rispetto ad altri comandi Curveto perché presume che il primo punto di controllo sia un riflesso del punto di controllo precedente su quello precedente, o che sia effettivamente il punto precedente se non esiste un punto di controllo precedente. La sintassi di T è "T x,y" o "t dx,dy", che corrisponde rispettivamente alle coordinate assolute e alle distanze relative, ed è usata per creare una curva di Bézier quadratica. S viene usata per creare una curva cubica di Bézier, la sintassi è "S cx, cy x, y" oppure "s dcx, dcy dx, dy", dove (d)cx specifica il secondo punto di controllo.
Infine, tutti i comandi della curva di Bézier possono creare un grafo di Bézier a più lati, inizializzare il comando e poi specificare tutti i parametri più volte per creare un grafo di Bézier a più lati. Pertanto, i seguenti due comandi possono creare esattamente lo stesso percorso:
Arcto
A volte è più semplice descrivere un percorso di curva d'arco ellittico rispetto a un percorso di curva di Bézier. Alla fine della giornata, l'elemento percorso supporta il comando Arcto. Il centro dell'arco viene calcolato da altre variabili. Una dichiarazione arcto è relativamente una ripetizione di Visual Studio: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Scomponendola, rx e ry sono i raggi nelle direzioni x e y, rispettivamente, e il valore di LargeArcFlag è 0 o 1 per determinare se tracciare un arco piccolo (0) o un arco grande (1). Lo SweepFlag è anche 0 o 1, che viene usato per determinare se l'arco è in senso orario (1) o antiorario (0). x e y sono le coordinate della destinazione. Sebbene xAxisRotate supporti il cambiamento dell'orientamento dell'asse x rispetto al sistema di riferimento corrente, questo parametro non sembra avere molto effetto in Gecko 7.
ClosePath
Il comando ClosePath disegnerà semplicemente una linea retta dal punto corrente al primo punto del percorso corrente. È il comando più semplice e non include alcun parametro. Segue il percorso lineare più breve fino al punto di partenza, e se altri percorsi si trovano su questo percorso, i possibili percorsi si intersecano. La sintassi è "Z" o "z", e entrambi i metodi di scrittura hanno la stessa funzione.
elemento
I seguenti elementi possono utilizzare l'attributo d:
Le stesse regole possono essere <animate>applicate ai percorsi di animazione.
Promemoria
L'origine (sistema di coordinate 0,0 punti) è spesso l'angolo in alto a sinistra del contesto. Tuttavia<glyph>, l'origine dell'elemento si trova nell'angolo in basso a sinistra della sua cassetta delle lettere.
Una virgola è permessa tra due numeri qualsiasi, ma non altrove.
esempio
<SVG version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="nuovo 0 0 50 50" xml:space="preserve">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Per dimostrare cosa significa effettivamente d="M37,17v15H14V17H37z M50,0H0v50h50V0z", discutiamo ogni sottoparagrafo di questa stringa.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Questa proprietà contiene le stringhe che compongono l'intero SVG.
M37,17
M è l'abbreviazione di MoveTo. La "M" maiuscola indica coordinate assolute, mentre la "m" minuscola indica distanza relativa. Implica che si basa sulle coordinate di partenza, la linea è all'interno della casella e si inizia nell'angolo in alto a destra del rettangolo all'interno della scatola.
37 è l'abbreviazione della posizione iniziale dell'SVG, a 37 pixel sull'asse X.
17 Inizia la posizione svg, a 17 pixel sull'asse y.
v15
V sta per verticale. La V maiuscola indica le coordinate assolute, mentre la V minuscola indica la lunghezza e la distanza relative. dx/dy e x/y possono essere usati nelle posizioni corrispondenti di H/V e h/v.
Qui è rappresentato disegnando una linea verticale di 15 pixel rispetto a una data coordinata. Significa che disegni 15 pixel fino alle coordinate 37,32.
H14
H sta per livello, che sono coordinate assolute perché sono maiuscole.
Dalla fine della v15, traccia una linea orizzontale fino a raggiungere la coordinata assoluta 14, e termina il disegno quando raggiunge la coordinata x 14. I tratti si trovano alle coordinate 14,32.
V17
Proprio come prima, inizia dalla fine della linea precedente e traccia una linea verticale fino a raggiungere la coordinata 17 dell'asse y. I colpi si trovano alle coordinate 14,17.
H37
Infine, partendo da 14, 17, traccia una linea orizzontale fino a raggiungere la coordinata 37 dell'asse x. Il tratto si trova alle coordinate 37,17 (valore di M)
z
Sia la Z minuscola che la Z maiuscola chiudono una serie di segmenti SVG.
,
Una virgola avvia la sequenza successiva di semplici segmenti di grafici vettoriali. La serie successiva di segmenti di linea vettoriale semplici formerà la scatola esterna.
M50,0
Inizia dall'asse x 50 e dall'asse y 0.
H0
Disegna una linea retta fino a (0,0).
v50
Disegna una linea verticale di 0,0 pixel rispetto a 50. Questa linea sarà tracciata fino a (0,50).
H50
Disegna una linea orizzontale di 50 pixel rispetto a (0,-50). Questa linea sarà tracciata a destra a (50,50).
V0
Disegna una linea verticale finché non raggiungi la coordinata 0 dell'asse y. Questo traccia una linea a (50,0), che è il valore di M.
z
Sia la Z minuscola che la Z maiuscola chiudono una serie di segmenti SVG.
Allega il codice:
Infine, il link al documento è allegato: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Pubblicato su 04/05/2018 11:29:47
|
|
|
|
