paint-order

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 텍스트는 이에 해당하지 않으므로 strokefill의 순서만 정할 수 있습니다.

normal

일반적인 그리기 순서를 사용합니다.

stroke, fill, markers

일부 항목 또는 모든 항목의 그리기 순서를 지정합니다.

형식 정의

초기값normal
적용대상text elements
상속yes
계산 값as specified
Animation typediscrete

형식 구문

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

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
paint-order

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.