paint-order

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

normal
일반적인 그리기 순서를 사용합니다.
stroke,
fill,
markers
일부 항목 또는 모든 항목의 그리기 순서를 지정합니다.

형식 정의

초기값normal
적용대상text elements
상속yes
Computed valueas specified
Animation typediscrete

형식 구문

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 Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'paint-order' in that specification.
Candidate Recommendation Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
paint-orderChrome Full support 35Edge Full support 17Firefox Full support 60IE No support NoOpera Full support 22Safari Full support 8WebView Android Full support 37Chrome Android Full support 35Firefox Android Full support 60Opera Android Full support 22Safari iOS Full support 8Samsung Internet Android Full support 3.0

Legend

Full support  
Full support
No support  
No support