CSS paint-order
La proprietà CSS paint-order per controllare l'ordine di pittura degli elementi (CSS3)
La proprietà paint-order consente di determinare l'ordine in cui gli elementi vengono disegnati in un documento, come nel caso degli SVG. Può essere utile per gestire l'ordine di pittura di bordi, riempimenti e marker, migliorando la qualità visiva e l'interazione grafica.
Sintassi
Significato dei valori principali:
-
fill: disegna prima il riempimento dell'elemento (in genere l'interno dell'elemento). Questo valore è utile per gli SVG.
-
stroke: disegna prima i bordi dell'elemento. Utile quando si lavora con contorni di forme SVG.
-
marker: disegna prima i marker (come le frecce) associati all'elemento. È utilizzato per elementi SVG come linee o curve con marker.
-
normal: usa l'ordine di pittura predefinito, che in genere è riempimento, bordi e poi marker.
Esempio proprietà: paint-order
Codice Esempio: paint-order
.example-shape {
fill: yellow;
stroke: red;
stroke-width: 5;
paint-order: stroke fill; /* Disegna prima il bordo, poi il riempimento */
}
Contenuto Esempio: paint-order
Esempio di utilizzo di paint-order
In questo esempio, la proprietà paint-order viene utilizzata per modificare l'ordine di pittura di un elemento SVG:
CSS e HTML per un elemento SVG con paint-order modificato:
<style>
svg {
width: 200px;
height: 200px;
}
.example-shape {
fill: yellow;
stroke: red;
stroke-width: 5;
paint-order: stroke fill; /* Disegna prima il bordo, poi il riempimento */
}
</style>
<svg>
<circle cx="100" cy="100" r="50" class="example-shape" />
</svg>
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
IP: 216.73.216.108
