Sistema di coordinate SVG

Come molti sistemi di coordinate di disegno computerizzato utilizzati, anche l'SVG utilizza un sistema di coordinate a griglia. Questo sistema di coordinate ha le seguenti caratteristiche: il punto di origine del sistema di coordinate è nell'angolo superiore sinistro (0,0), l'asse positivo dell'asse X si dirige a destra, inizia dal punto 0,0 e x aumenta gradualmente. L'asse positivo dell'asse Y si dirige verso il basso, inizia dal punto 0,0 e y aumenta gradualmente. Le coordinate sono in unità di pixel

Il sistema di coordinate dell'SVG (e la maggior parte degli altri grafici computerizzati) è leggermente diverso dal sistema di coordinate matematiche, grafici ecc.

　Matematica/sistema di coordinate cartesiano

Nel sistema di coordinate cartesiano, il punto x=0, y=0 si trova nell'angolo inferiore sinistro del grafico. Con l'aumento di x, il punto si muove a destra nel sistema di coordinate. Quando x diminuisce, il punto si muove a sinistra nel sistema di coordinate. Con l'aumento di y, il punto si muove verso l'alto nel sistema di coordinate. Quando y diminuisce, il punto si muove verso il basso nel sistema di coordinate.

Questo è un'illustrazione del sistema di coordinate grafico comune, con 0,0 nell'angolo inferiore sinistro:

Sistema di coordinate SVG

Nel sistema di coordinate SVG, il punto x=0, y=0 è nell'angolo superiore sinistro. Pertanto, rispetto al sistema di coordinate grafico comune, l'asse y è inverso. Con l'aumento di y nell'SVG, i punti, le forme ecc. si muovono verso il basso, non verso l'alto.

Questo è un'illustrazione del sistema di coordinate SVG, con 0,0 nell'angolo superiore sinistro:

Unità del sistema di coordinate

È possibile specificare l'unità corrispondente a 1 unità del sistema di coordinate SVG. È possibile eseguire questa operazione in qualsiasi luogo in cui è possibile specificare le coordinate (posizione x e y, larghezza e altezza, ecc.). È possibile specificare l'unità dopo il valore, ad esempio 10cm o 125mm.

Se non viene specificata alcuna unità dopo il valore di coordinate, si assume che l'unità sia pixel(px).

Ecco l'elenco delle unità che possono essere utilizzate insieme agli elementi SVG:

In proprietà width e height del <svg> l'unità impostata sull'elemento è influente solo sull'elemento <svg> (viewport). Le forme all'interno dell'elemento <svg> devono impostare le proprie unità. Allo stesso modo, se non viene specificato l'unità, l'unità predefinita è il pixel.