paint-order
Baseline
2024
Newly available
Since â¨March 2024â©, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
CSS-ÑвойÑÑво paint-order позволÑÐµÑ Ð²Ð°Ð¼ конÑÑолиÑоваÑÑ Ð¿Ð¾ÑÑдок, в коÑоÑом оÑÑиÑовÑваÑÑÑÑ Ð·Ð°Ð»Ð¸Ð²ÐºÐ° и обводка (и наÑиÑованнÑе маÑкеÑÑ) ÑекÑÑового ÑодеÑжимого и ÑигÑÑ.
СинÑакÑиÑ
/* ÐоÑмалÑнÑй */
paint-order: normal;
/* ÐдиниÑное знаÑение */
paint-order: stroke; /* оÑÑиÑовÑÐ²Ð°ÐµÑ ÑнаÑала обводкÑ, заÑем Ð·Ð°Ð»Ð¸Ð²ÐºÑ Ð¸ маÑкеÑÑ */
paint-order: markers; /* оÑÑиÑовÑÐ²Ð°ÐµÑ ÑнаÑала маÑкеÑÑ, заÑем Ð·Ð°Ð»Ð¸Ð²ÐºÑ Ð¸ Ð¾Ð±Ð²Ð¾Ð´ÐºÑ */
/* ÐножеÑÑвеннÑе знаÑÐµÐ½Ð¸Ñ */
paint-order: stroke fill; /* оÑÑиÑовÑÐ²Ð°ÐµÑ ÑнаÑала обводкÑ, заÑем заливкÑ, заÑем маÑкеÑÑ */
paint-order: markers stroke fill; /* оÑÑиÑовÑÐ²Ð°ÐµÑ Ð¼Ð°ÑкеÑÑ, заÑем обводкÑ, заÑем Ð·Ð°Ð»Ð¸Ð²ÐºÑ */
/* ÐлобалÑнÑе знаÑÐµÐ½Ð¸Ñ */
paint-order: inherit;
paint-order: initial;
paint-order: revert;
paint-order: unset;
ÐÑли знаÑение не Ñказано, знаÑением по ÑмолÑÐ°Ð½Ð¸Ñ ÑвлÑеÑÑÑ ÑледÑÑÑий поÑÑдок fill, stroke, markers.
Ðогда Ñказано одно знаÑение, Ñо ÑнаÑала оÑÑиÑовÑваеÑÑÑ Ð¾Ð½Ð¾, заÑем два дÑÑÐ³Ð¸Ñ Ð² обÑÑном поÑÑдке дÑÑг оÑноÑиÑелÑно дÑÑга. Ðогда Ñказано два знаÑениÑ, они бÑдÑÑ Ð¾ÑÑиÑÐ¾Ð²Ð°Ð½Ñ Ð² Ñказанном поÑÑдке, а заÑем бÑÐ´ÐµÑ Ð¾ÑÑиÑовано неопÑеделÑнное знаÑение.
ÐÑимеÑание:
РконÑекÑÑе ÑÑого ÑвойÑÑва, маÑкеÑÑ Ð¾ÑÑиÑовÑваÑÑÑÑ ÑолÑко пÑи ÑиÑовании ÑоÑм SVG, вклÑÑаÑÑиÑ
иÑполÑзование ÑвойÑÑв marker-* (напÑÐ¸Ð¼ÐµÑ marker-start) и ÑлеменÑа <marker>. Ðни не пÑименÑÑÑÑÑ Ðº ÑекÑÑÑ HTML, в ÑÑом ÑлÑÑае Ð²Ñ Ð¼Ð¾Ð¶ÐµÑе опÑеделиÑÑ ÑолÑко поÑÑдок stroke и fill.
ÐнаÑениÑ
normal-
ÐкÑаÑÐ¸Ñ ÑазлиÑнÑе ÑаÑÑи в обÑÑном поÑÑдке.
stroke,fill,markers-
УказÑваÑÑÑÑ Ð½ÐµÐºÐ¾ÑоÑÑе или вÑе ÑÑи знаÑÐµÐ½Ð¸Ñ Ð² Ñом поÑÑдке, в коÑоÑом Ð²Ñ Ñ Ð¾ÑиÑе ÑвидеÑÑ Ð¾ÑÑиÑовкÑ.
ФоÑмалÑное опÑеделение
| ÐаÑалÑное знаÑение | normal |
|---|---|
| ÐÑименÑеÑÑÑ Ðº | ÑекÑÑовÑе ÑлеменÑÑ |
| ÐаÑледÑеÑÑÑ | да |
| ÐбÑабоÑка знаÑÐµÐ½Ð¸Ñ | как Ñказано |
| Animation type | discrete |
ФоÑмалÑнÑй ÑинÑакÑиÑ
paint-order =
normal |
[ fill || stroke || markers ]
ÐÑимеÑÑ
Ðзменение поÑÑдка оÑÑиÑовки обводки и заливки на пÑоÑивоположнÑй
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
<text x="10" y="75">stroke in front</text>
<text x="10" y="150" class="stroke-behind">stroke behind</text>
</svg>
CSS
text {
font-family: sans-serif;
font-size: 50px;
font-weight: bold;
fill: black;
stroke: red;
stroke-width: 4px;
}
.stroke-behind {
paint-order: stroke fill;
}
РезÑлÑÑаÑ
СпеÑиÑикаÑии
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # PaintOrderProperty |