SVG
percorsi
Ricerca…
introduzione
I percorsi sono l'elemento più flessibile di SVG. Un percorso è una serie di curve di Bézier cubiche o quadratiche, disposte in spline collegate. Un percorso può essere aperto o chiuso in un ciclo o può essere complesso con diversi sottocomponenti. Se un percorso non è semplice, la regola di riempimento è importante per decidere quali aree sono all'interno o all'esterno del percorso.
I percorsi verranno normalmente generati dagli editor automatici. I percorsi tipicamente quadratici vengono utilizzati per i caratteri e i percorsi cubici per le illustrazioni.
Parametri
| Attributi / parametri | Descrizione |
|---|---|
| d | Definisce una sequenza di comandi di disegno che creano la forma. ad es. d = "M 50,60 L50,60". I comandi di disegno maiuscoli indicano le coordinate assolute. I comandi di disegno in lettere minuscole indicano le coordinate relative. |
| (...) | Comandi di disegno |
| m / M | Sposta la posizione del disegno corrente su XY d = "M XY" |
| l / L | Disegna una linea su X, Y d = "L XY" |
| v / V | Disegna una linea verticale su Y d = "V Y" |
| h / H | Disegna una linea orizzontale a X d = "H X" |
| aa | Disegna un arco su X, Y con un raggio implicito di Rx e Ry e una rotazione specificata dalla rotazione dell'asse X. I grandi flag arco e sweep selezionano quale dei 4 possibili archi che soddisfano questi vincoli dovrebbero essere disegnati. d = "A Rx Ry X-axis-rotation (degrees) flag dell'arco di grandi dimensioni (0/1) sweep-flag (0/1) X, Y". |
| q / Q | Disegna la curva quadratica di bezier su X, Y utilizzando il punto di controllo X1Y1 d = "X1Y1 X Y" |
| t / T | Disegna una curva di bezier quadratica stenografica (il punto di controllo viene calcolato come riflesso del punto di controllo del precedente comando di disegno q / Q attraverso la posizione di disegno corrente) |
| c / C | Disegna una curva cubica di bezier su X, Y usando i punti di controllo X1, Y1 e X2, Y2 d = "C X1Y1, X2Y2, XY" |
| s / S | Disegna una curva Bezier a forma di cubica (il primo punto di controllo viene calcolato come riflesso del secondo punto di controllo del precedente comando di disegno c / C attraverso la posizione di disegno corrente). |
| - z / Z | Chiudi il tracciato disegnando una linea all'inizio del percorso (o dei percorsi se un'altra z è stata utilizzata in precedenza) |
| (...) | (fine della lista) |
| lunghezza del tragitto | (Facoltativo) Consente all'autore di specificare un valore nominale del percorso che verrà utilizzato per la calibrazione in altri calcoli, ad esempio per il testo lungo un percorso |
| Parametri di corsa | comune tra tutti gli elementi di forma e disegno |
| ictus | Colore del percorso |
| stroke-width | Larghezza del percorso |
Osservazioni
Informazioni dettagliate sull'elemento del path SVG possono essere trovate nella Raccomandazione W3C per SVG .
Disegna una linea blu diagonale usando il comando L path
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 L 100,50" stroke="blue" stroke-width="5" />
</svg>
Risultato:
Disegna una linea arancione orizzontale usando il comando di disegno H.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 H 200" stroke="orange" stroke-width="5" />
</svg>
Risultato:
Disegna una croce rossa usando i comandi di percorso l (linea relativa)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 l 90,90 M 100,10 l -90,90" stroke="red" stroke-width="10" />
</svg>
Risultato:
Disegna una linea verde verticale usando il comando percorso V
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 V 200" stroke="green" stroke-width="5" />
</svg>
Risultato:
Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow