Proprietà CSS clip-path
Definizione e uso
L'attributo clip-path ti permette di tagliare l'elemento in forme di base o sorgenti SVG.
Nota:clip-path sostituirà l'attributo abbandonato clip.
Sintassi CSS
clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;
Valore dell'attributo
| Valore | Descrizione |
|---|---|
| clip-source | Definisci l'URL che punta all'elemento SVG <clipPath>. |
| basic-shape | Taglia l'elemento per forme di base: cerchio, ellisse, poligono o stella. |
| margin-box | Usa il riquadro di margin come riquadro di riferimento. |
| border-box | Usa il riquadro di border come riquadro di riferimento. |
| padding-box | Usa il riquadro di padding come riquadro di riferimento. |
| content-box | Usa il riquadro di contenuto (content box) come riquadro di riferimento. |
| fill-box | Usa il riquadro di confine dell'oggetto (object bounding box) come riquadro di riferimento. |
| stroke-box | Usa il riquadro di confine del tratto (stroke bounding box) come riquadro di riferimento. |
| view-box | Usa la viewport SVG come riquadro di riferimento. |
| none | Valore predefinito. Non crea percorso di taglio. |
Dettagli tecnici
| Valore predefinito: | none |
|---|---|
| Ereditarietà: | No |
| Produzione di animazioni: | Supportato (solo per il valore basic-shape). Vedi anche:Proprietà correlate agli animazioni. |
| Versione: | Modulo di Maschera CSS Livello 1 |
| Sintassi JavaScript: | object.style.clipPath="circle(50%)" |
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 55.0 23.0 -webkit- |
79.0* | 54.0 | 9.1 6.1 -webkit- |
42.0 15.0 -webkit- |
* Edge solo supporta clip-path sugli elementi SVG (non supporta gli elementi HTML).
