SVG - Path
L'elemento <path> viene utilizzato per disegnare linee rette collegate.
Dichiarazione
Di seguito è riportata la dichiarazione della sintassi di <path>elemento. Abbiamo mostrato solo gli attributi principali.
<path
d="data" >
</path>Attributi
| Sr.No. | Nome e descrizione |
|---|---|
| 1 | d - dati di percorso, solitamente un insieme di comandi come moveto, lineto ecc. |
L'elemento <path> viene utilizzato per definire qualsiasi percorso. L'elemento Path utilizza i dati Path che comprendono il numero di comandi. I comandi si comportano come un tocco di matita o un puntatore si sta muovendo per disegnare un tracciato.
| Sr.No. | Comando e descrizione |
|---|---|
| 1 | M - moveto - sposta da un punto a un altro. |
| 2 | L - lineto - crea una linea. |
| 3 | H - linea orizzontale - crea una linea orizzontale. |
| 4 | V - vertical lineto - crea una linea verticale. |
| 5 | C - curveto - crea una curva. |
| 6 | S - curvatura liscia - crea una curva morbida. |
| 7 | Q - curva di Bézier quadratica: crea una curva di Bézier quadratica. |
| 8 | T - Curvatura di Bezier quadratica liscia: crea una curva di Bezier quadratica liscia |
| 9 | A - Arco ellittico: crea un arco ellittico. |
| 10 | Z - closepath - chiude il percorso. |
Poiché i comandi precedenti sono in maiuscolo, rappresentano il percorso assoluto. Nel caso in cui vengano utilizzati i comandi in minuscolo, viene utilizzato il percorso relativo.
Esempio
testSVG.htm<html>
<title>SVG Path</title>
<body>
<h1>Sample SVG Path Image</h1>
<svg width="570" height="320">
<g>
<text x="0" y="10" fill="black" >Path #1: Without opacity.</text>
<path d="M 100 100 L 300 100 L 200 300 z"
stroke="black" stroke-width="3" fill="rgb(121,0,121)"> </path>
</g>
</svg>
</body>
</html>Nell'esempio sopra, nella prima forma, M 100100 sposta il puntatore del disegno su (100,100), L 300100 traccia una linea da (100,100) a (300,100), L 200300 traccia una linea da (300,100) a (200,300) ez chiude il percorso.
Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.
Percorso con opacità
<html>
<title>SVG Path</title>
<body>
<h1>Sample SVG Path Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >Path #2: With opacity </text>
<path d="M 100 100 L 300 100 L 200 300 z"
style="fill:rgb(121,0,121);stroke-width:3;
stroke:rgb(0,0,0);stroke-opacity:0.5;"> </path>
</g>
</svg>
</body>
</html>Produzione
Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.