[css] CSS - paint-order 속성 - SVG 요소나 텍스트 그려지는 순서 지정 (= paint-order속성 = 페인트오더속성)

1. paint-order 예제 -  SVG 요소나 텍스트 그려지는 순서 지정
2. paint-order 정의
3. paint-order 구문
4. paint-order 예제 - 무지개색 그라데이션 사용해 SVG <text> 그리기 순서 변경

paint-order 예제 -  SVG 요소나 텍스트 그려지는 순서 지정

 

<style>

svg {border:1px solid silver;}

 

circle {

  paint-order: stroke fill;

}

</style>

<svg width="200" height="200">

  <circle cx="100" cy="100" r="80" stroke="blue" stroke-width="20" fill="pink" />

</svg>

 

결과보기

paint-order 정의

 

SVG 요소나 텍스트 요소가 그려지는 순서 지정.

 

---

 

1.

• 텍스트 요소 경우, 획(stroke)과 채우기(fill) 순서만 변경 가능. (∵ 마커 적용 불가)
• 기본적으로, 채우기 (fill) 먼저 한 후, 획(stroke) 그음.

 

2.

• 기본값: normal
• 적용대상: 텍스트 요소
• 상속여부: O
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.paintOrder="stroke fill";

 

3.

IE 제외한 주요 최신 브라우저 모두 지원.

(단, Chrome, Opera 경우, 일부 지원)

 

4. MDN paint-order 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order

 

paint-order 구문

 

selector {paint-order: normal|one value|two values|three values|initial|inherit;}

 

---

[속성값]

 

normal

fill, stroke, markers 순으로 그리기 진행. (기본값)

 

one value

지정값으로 그리기 시작 후, 기본값 순서로 나머지 그리기 진행.

• (예) "stroke" 지정 시, 다음 순서는 fill, marker 순으로 진행.

 

three values

지정값으로 그리기 시작 후, 기본값 순서로 나머지 페인팅 진행함. 

• (예) "stroke markers" 지정 시, 다음 순서는 fill 단계 진행.

 

three values

지정 값 순서대로 그리기 진행.

(예) "markers stroke fill" 지정 시, 이 순서대로 진행.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.

 

paint-order 예제 - 무지개색 그라데이션 사용해 SVG <text> 그리기 순서 변경

 

<style> 

text {

  font-size: 80px;

  font-weight: bold;

  paint-order: stroke fill;

}

</style>

<svg width="100%" height="150">

  <defs>

    <linearGradient id="rainbow" x1="0%" y1="0%" x2="100%" y2="0%">

      <stop offset="0%" style="stop-color:#ef5350;stop-opacity:1" />

      <stop offset="25%" style="stop-color:#7e57c2;stop-opacity:1" />

      <stop offset="50%" style="stop-color:#26c6da;stop-opacity:1" />

      <stop offset="75%" style="stop-color:#eeff41;stop-opacity:1" />

      <stop offset="100%" style="stop-color:#ff5722;stop-opacity:1" />

    </linearGradient>

  </defs>

  <text x="30" y="80" id="hz" fill="url(#rainbow)" stroke="purple" stroke-width="10">Homzzang.com</text>

</svg>

 

결과보기

PS. 색상값 약간 다르게 한 버전