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 (en-US) 등)과 <marker> (en-US) 요소를 사용하는 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 # PaintOrder

브라우저 호환성

BCD tables only load in the browser