CSS paint-order egenskap

Definition och användning

paint-order Egenskapen specificerar ritningsordningen för SVG-element eller text.

Observera:För textelement kan endast ordningen för kantlinje (stroke) och fyllning (fill) ändras, eftersom markörer (markers) inte gäller.

Ändra ritningsordningen för SVG <circle>-element:

circle {
  paint-order: stroke fill;
}

Ändra ritningsordningen för SVG <text>-element med regnbågens gradientfyllning:

text {
  paint-order: stroke fill;
}

paint-order: normal|en värde|två värden|tre värden|initial|inherit;

Värde	Beskrivning
normal	Standardvärde. Ritningsordningen är fyllning, kantlinje, markörer.
en värde	Ritning kommer att börja med de angivna värdena och fortsätta med standardordning för resten. Om endast "stroke" anges, är nästa ritningsaktivitet fyllning (fill), följt av markörer (markers).
två värden	Ritning kommer att börja med de angivna värdena och fortsätta med standardordning för resten. Om "stroke markers" anges, kommer nästa ritningsaktivitet att vara fyllning (fill).
tre värden	Ritning kommer att genomföras enligt de angivna värdena.
initial	Sätt detta värde till dess standardvärde. Se till: initial.
inherit	Följande egenskap från föräldrelementet. Se till: inherit.

Standardvärde:	normal
Arv:	ja
Animeringsproduktion:	Stöds inte. Se till:Animeringsrelaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.paintOrder="stroke fill"

Talen i tabellen representerar den första webbläsarens version som helt stöder detta egenskap.

Chrome	Edge	Firefox	Safari	Opera
35.0	17.0	60.0	8.0	22.0

Lärarhandledning:SVG-lär

Lärarhandledning:HTML SVG-grafik