SVG <path>

SVG percorso - <path>

<path> L'elemento viene utilizzato per definire il percorso.

I seguenti comandi possono essere utilizzati per i dati del percorso:

  • M = muovi a (moveto)
  • L = linea a (lineto)
  • H = linea orizzontale a (horizontal lineto)
  • V = linea verticale a (vertical lineto)
  • C = curva a (curveto)
  • S = curva liscia a (smooth curveto)
  • Q = curva Bézier quadratica (quadratic Bézier curve)
  • T = curva Bézier quadratica liscia (smooth quadratic Bézier curveto)
  • A = arco ellittico (elliptical Arc)
  • Z = chiudi percorso (closepath)

Attenzione: tutti i comandi sopra menzionati possono essere rappresentati anche con lettere minuscole. Le lettere maiuscole rappresentano la posizionamento assoluto, mentre le lettere minuscole rappresentano il posizionamento relativo.

Esempio 1

Esempio: nel seguente esempio viene definito un percorso che parte da 150,0, poi traccia una linea fino al punto 75,200, quindi traccia una linea da lì fino al punto 225,200 e infine chiude il percorso tornando a 150,0.

Questo è il codice SVG:

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

Prova personalmente

Esempio 2

Le curve di Bézier (Bézier curves) vengono utilizzate per modellare curve lisce che possono essere ingrandite o rimpicciolite senza limiti. Di solito, l'utente seleziona due punti terminali e uno o due punti di controllo. Una curva di Bézier con un solo punto di controllo viene chiamata curva di Bézier quadratica (quadratic Bézier curve), mentre una curva di Bézier con due punti di controllo viene chiamata curva di Bézier cubica (cubic).

Esempio di creazione di una curva quadratico-bezier, dove A e C sono il punto di partenza e di arrivo, e B è il punto di controllo:

A B C

Questo è il codice SVG:

<svg height="400" width="450">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  <!-- 标记相关的点 -->
  <g stroke="black" stroke-width="3" fill="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>
  <!-- 给点添加标签 -->
  <g font-size="30" font-family="sans-serif" fill="black" stroke="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 personalmente

Molto complicato? Sì!!! Poiché il percorso di disegno è molto complesso, si consiglia vivamente di utilizzare un editor SVG per creare grafici complessi.