CSS paint-order eigenschap

Definitie en gebruik

paint-order De eigenschap specificeert de tekenvolgorde van SVG-elementen of tekst.

Opmerking:Voor tekstelementen kan alleen de volgorde van rand (stroke) en vulling (fill) worden gewijzigd, omdat markering (markers) niet van toepassing is.

Voorbeeld

Voorbeeld 1

Wijzig de tekenvolgorde van de SVG <circle> element:

circle {
  paint-order: stroke fill;
}

Probeer het zelf

Voorbeeld 2

Wijzig de tekenvolgorde van de SVG <text> element met regenboogverloopvulling:

text {
  paint-order: stroke fill;
}

Probeer het zelf

CSS syntaxis

paint-order: normal|een waarde|twee waarden|drie waarden|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
normaal Standaardwaarde. De tekenvolgorde is vullen, rand, markering.
een waarde

De tekening begint met de opgegeven waarde en gaat vervolgens verder volgens de standaardvolgorde.

Als alleen "stroke" wordt opgegeven, is de volgende tekenactiviteit het vullen (fill), gevolgd door de markering (markers).
twee waarden

De tekening begint met de opgegeven waarde en gaat vervolgens verder volgens de standaardvolgorde.

Als "stroke markers" wordt opgegeven, zal de volgende tekenactiviteit het vullen (fill) zijn.
drie waarden De tekening zal volgens de opgegeven waarden worden uitgevoerd.
initial Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap wordt van de ouder element overgenomen. Raadpleeg inherit.

Technische details

Standaardwaarde: normaal
Inheritsbaarheid: ja
Animatie maken: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.paintOrder="stroke fill"

Browserondersteuning

De cijfers in de tabel vertegenwoordigen de browserversie die de eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
35.0 17.0 60.0 8.0 22.0

Relevante pagina

Handleiding:SVG handleiding

Handleiding:HTML SVG grafieken