CSS paint-order 속성

정의와 사용법

paint-order 속성은 SVG 요소나 텍스트의 그리기 순서를 지정합니다.

주의:문자 요소에 대해서는 경계선(stroke)과 채우기(fill)의 순서만 변경할 수 있습니다. 마커(markers)는 적용되지 않습니다.

SVG <circle> 요소의 그리기 순서를 변경합니다:

circle {
  paint-order: stroke fill;
}

SVG <text> 요소의 그리기 순서를彩虹渐变填充을 변경합니다:

text {
  paint-order: stroke fill;
}

paint-order: normal|한 가지 값|두 가지 값|세 가지 값|initial|inherit;

값	설명
normal	기본 값. 그리기 순서는 채우기, 경계선(stroke), 마커(markers)입니다.
한 가지 값	그리기는 주어진 값에서 시작하여 기본 순서로 나머지 부분을 계속 그립니다. 만약 "stroke"만 지정되면 다음 그리기 활동은 채우기(fill)이고 그 다음은 마커(markers)입니다.
두 가지 값	그리기는 주어진 값에서 시작하여 기본 순서로 나머지 부분을 계속 그립니다. "stroke markers"를 지정하면 다음 그리기 활동은 채우기(fill)입니다.
세 가지 값	그리기는 주어진 값에 따라 수행됩니다.
initial	이 속성을 기본 값으로 설정합니다. 참고: initial.
inherit	부모 요소에서 이 속성을 상속합니다. 참고: inherit.

기본 값:	normal
상속성:	yes
애니메이션 제작:	지원하지 않습니다. 참고:애니메이션 관련 속성.
버전:	CSS3
JavaScript 문법:	object.style.paintOrder="stroke fill"

표格에서의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

크롬	에지	파이어폭스	사파리	오페라
35.0	17.0	60.0	8.0	22.0