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 속성은 텍스트 및 모양의 채움 색과 테두리(마커 포함)를 그리는 순서를 지정합니다.
구문
css
/* 일반 */ 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
html
<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
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 |
브라우저 호환성
Loading…