목차
- paint-order 예제 - SVG 요소나 텍스트 그려지는 순서 지정
- paint-order 정의
- paint-order 구문
- 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. 색상값 약간 다르게 한 버전
