This page was translated from English by the community. Learn more and join the MDN Web Docs community.
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...