Sintassi

Significato dei valori principali:

• none: Nessun percorso definito, nessun movimento.

• path("..."): Definisce un percorso SVG personalizzato con comandi come M, C, L, ecc.

• circle() e ellipse(): Percorsi circolari o ellittici con specifiche dimensioni e posizioni.

• polygon(): Percorso poligonale definito da una serie di punti.

• ray(): Percorso a raggio con direzione e angolo specificati.

Esempio proprietà: offset-path

Codice Esempio: offset-path

CODE: CSS

1. .offset-path-box {

2.   offset-path: path("M20,200 C100,0 300,300 380,100");

3.   offset-distance: 0%;

4.   offset-rotate: auto;

5.   animation: animatePath 6s linear infinite;

6. }

Contenuto Esempio: offset-path

  
  <style>
    .offset-path-box {
      offset-path: path("M20,200 C100,0 300,300 380,100");
      offset-distance: 0%;
      offset-rotate: auto;
      animation: animatePath 6s linear infinite;
    }

    @keyframes animatePath {
      from { offset-distance: 0%; }
      to { offset-distance: 100%; }
    }
  </style>

  <div class="offset-path-box"></div>
  

✅ Note aggiuntive:

• Le forme geometriche (circle(), ellipse(), polygon(), ray()) sono utili per definire percorsi semplici senza scrivere path SVG complessi.
• È fondamentale usare questa proprietà insieme a offset-distance per visualizzare il movimento.
• Supporto browser: Chrome, Edge, Safari con ottima compatibilità; Firefox ancora in sperimentazione.

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser