SVG 방사형 그라디언트
SVG 방사형 그라디언트 – <radialGradient>
<radialGradient> 요소는 방사형 그라디언트(한 방향에서 다른 방향으로, 한 색상에서 다른 색상으로의 원형 전환)를 정의하는 데 사용된다.
그라디언트 정의는 <defs> 또는 <svg> 요소 내에 배치된다. <defs> 요소는 “정의”의 약자로, 그라디언트와 같은 특수 요소의 정의를 포함한다.
각 그라디언트는 그라디언트를 식별하는 id 속성을 가져야 한다. 그래픽/이미지는 이후 사용할 그라디언트를 가리킨다.
방사형 그라디언트 1
빨간색에서 파란색으로 진행하는 방사형 그라디언트가 적용된 타원:
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>코드 설명:
- <radialGradient> 요소의 id 속성은 그라디언트의 고유한 이름을 정의한다.
- cx와 cy 속성은 방사형 그라디언트의 끝 원의 x와 y 위치를 정의한다.
- fx와 fy 속성은 방사형 그라디언트의 시작 원의 x와 y 위치를 정의한다.
- r 속성은 방사형 그라디언트의 끝 원의 반지름을 정의한다.
- 그라디언트의 색상은 두 개 이상의 <stop> 요소로 정의된다.
- <stop>의 offset 속성은 그라디언트 정지점이 위치하는 곳을 정의한다.
- <stop>의 stop-color 속성은 그라디언트 정지점의 색상을 정의한다.
- <ellipse> 요소의 fill 속성은 해당 요소를 “grad1” 그라디언트로 가리킨다.
방사형 그라디언트 2
빨간색에서 녹색을 거쳐 파란색으로 진행하는 방사형 그라디언트가 적용된 타원:
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>방사형 그라디언트 3
빨간색에서 파란색으로 진행하는 방사형 그라디언트가 적용된 타원 (여기서는 끝 원의 x와 y 위치를 25%로 설정):
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad3" cx="25%" cy="25%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>방사형 그라디언트 4 – spreadMethod=”reflect”
spreadMethod=”reflect”를 사용하여 빨간색에서 파란색으로 진행하는 방사형 그라디언트가 적용된 타원:
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad4" cx="25%" cy="25%" spreadMethod="reflect">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
</svg>방사형 그라디언트 5 – spreadMethod=”repeat”
spreadMethod=”repeat”를 사용하여 빨간색에서 파란색으로 진행하는 방사형 그라디언트가 적용된 타원:
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad5" cx="25%" cy="25%" spreadMethod="repeat">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>방사형 그라디언트 6 – 투명도 적용
빨간색에서 파란색으로 진행하는 방사형 그라디언트가 적용된 타원 (투명도 효과 적용):
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad6" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" stop-opacity="0" />
<stop offset="100%" stop-color="blue" stop-opacity="1" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad6)" />
</svg>코드 설명:
<stop>의 stop-opacity 속성은 그라디언트 정지점 색상의 투명도를 정의한다.
SVG <radialGradient> 속성
| 속성 | 설명 |
|---|---|
| id | 필수. <radialGradient> 요소의 고유 ID를 정의한다. |
| cx | 방사형 그라디언트의 끝 원의 x 위치. 기본값은 50%. |
| cy | 방사형 그라디언트의 끝 원의 y 위치. 기본값은 50%. |
| fr | 방사형 그라디언트의 시작 원의 반지름. 기본값은 0%. |
| fx | 방사형 그라디언트의 시작 원의 x 위치. 기본값은 50%. |
| fy | 방사형 그라디언트의 시작 원의 y 위치. 기본값은 50%. |
| r | 방사형 그라디언트의 끝 원의 반지름. 기본값은 50%. |
| spreadMethod | 그라디언트의 확산 방법을 정의한다. 가능한 값: “pad”, “reflect”, “repeat”. 기본값은 “pad”. |
| href | 템플릿으로 사용될 다른 <radialGradient> 요소에 대한 참조를 정의한다. |
| gradientUnits | cx, cy, r, fx, fy, fr에 대한 좌표 시스템을 정의한다. 가능한 값: “userSpaceOnUse”와 “objectBoundingBox”. 기본값은 “objectBoundingBox”. |
| gradientTransform | 그라디언트 좌표 시스템에 추가 변환을 정의한다. |
💡 방사형 그라디언트 고급 팁:
• cx/cy와 fx/fy 값 조정으로 비대칭 그라디언트 효과 생성
• stop-opacity 속성으로 그라디언트 색상의 투명도 변화 연출
• spreadMethod 속성값 변경으로 그라디언트 반복 패턴 제어
• fr 속성으로 시작 원 크기를 조정하여 다양한 방사형 효과 구현
