percorso SVG
percorso SVG - <percorso>
<Percorso> elemento viene utilizzato per definire un percorso.
Il comando seguente può essere utilizzato per i dati percorso:
- M = moveTo
- L = lineto
- H = lineto orizzontale
- V = lineto verticale
- C = curveTo
- S = curveTo liscia
- Q = curva di Bezier quadratica
- T = liscia quadratica curveTo Bezier
- A = arco ellittico
- Z = closePath
Nota: Tutti i comandi di cui sopra consentono lettere minuscole. Capitale rappresenta posizionamento assoluto, il posizionamento relativo indica minuscolo.
esempio 1
L'esempio sopra definisce un percorso che inizia nella posizione 1500 posizione 75200 raggiunta, e poi da lì a 225 200 nel 1500 e infine percorso chiuso.
Ecco il codice SVG:
Esempi
<Percorso D = "0 M150 L75 200 L225 200 Z" />
</ Svg>
Prova »
Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).
esempio 2
Utilizzando curva di Bezier modello liscia curva che può essere scalata a tempo indeterminato. In circostanze normali, l'utente seleziona uno o due punti finali e due punti di controllo. Un punto di controllo di una curva di Bezier che si chiama una curva di Bezier quadratica ed i due punti di controllo sono chiamati cubi.
L'esempio seguente crea un quadratiche curve di Bezier, A e C sono i punti iniziale e finale, B è un punto di controllo:
Ecco il codice SVG:
Esempi
<Percorso id = "lineAB" d = "M 100 350 l 150 -300" stroke = "red"
stroke-width = "3" riempire = "none" />
<Percorso id = "lineBC" d = "M 250 50 L 150 300" stroke = "red"
stroke-width = "3" riempire = "none" />
<Percorso D = "M 175 200 L 150 0" stroke = "verde" stroke-width = "3"
riempire = "none" />
<Percorso D = "M 100 350 q 150 -300 300 0" stroke = "blu"
stroke-width = "5" riempire = "none" />
<! - Segna punti rilevanti ->
<G ictus = "nero" stroke-width = "3" riempire = "black">
<Circle id = "pointa" cx = "100" cy = "350" r = "3" />
<Circle id = "pointB" cx = "250" cy = "50" r = "3" />
<Circle id = "pointC" cx = "400" cy = "350" r = "3" />
</ G>
<! - Etichettare i punti ->
<G font-size = carattere "30" = "sans-serif" riempire = corsa "nera" = "none"
text-anchor = "middle">
<Text x = "100" y = "350" dx = "- 30"> A </ text>
<Text x = "250" y = "50" dy = "- 10"> B </ text>
<Text x = "400" y = "350" dx = "30"> C </ text>
</ G>
</ Svg>
Prova »
Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).
Complicato? Sì! ! Perché quando il disegno della complessità percorso, si consiglia vivamente di utilizzare editor di SVG per creare immagini complesse.