목차
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. 색상값 약간 다르게 한 버전
