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; /* draw the stroke first, then fill and markers */
paint-order: markers; /* draw the markers first, then fill and stroke */
/* ë¤ì¤ ê° */
paint-order: stroke fill; /* draw the stroke first, then the fill, then the markers */
paint-order: markers stroke fill; /* draw markers, then stroke, then fill */
ì무ê²ë ì§ì íì§ ììì ëì 기본ê°ì fill, stroke, markersì
ëë¤.
íëì ê°ë§ ì§ì íë©´ ê·¸ ê°ì ì ì¼ ë¨¼ì 그린 í, 기본ê°ì ììì ë°ë¼ ë머ì§ë¥¼ 그립ëë¤. ë ê°ë¥¼ ì§ì íë©´ ëë¨¸ì§ íë를 맨 ëì¤ì 그립ëë¤.
ì°¸ê³ :
ë§ì»¤ì ê²½ì° marker-* ìì±(marker-start ë±)ê³¼ <marker> ìì를 ì¬ì©íë SVG 모ìì ê²½ì°ìë§ ì¬ë°ë¦
ëë¤. HTML í
ì¤í¸ë ì´ì í´ë¹íì§ ìì¼ë¯ë¡ strokeì fillì ììë§ ì í ì ììµëë¤.
ê°
normal-
ì¼ë°ì ì¸ ê·¸ë¦¬ê¸° ìì를 ì¬ì©í©ëë¤.
stroke,fill,markers-
ì¼ë¶ í목 ëë 모ë í목ì 그리기 ìì를 ì§ì í©ëë¤.
íì ì ì
| ì´ê¸°ê° | normal |
|---|---|
| ì ì©ëì | text elements |
| ìì | yes |
| ê³ì° ê° | as specified |
| 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 |