HTML5 <radialGradient> 태그 – SVG 방사형 그라디언트 완벽 가이드

HTML5 <radialGradient> 태그란?

<radialGradient> 태그는 SVG(Scalable Vector Graphics)에서 방사형(radial) 그라디언트를 정의할 때 사용하는 태그입니다. 중심점에서 바깥쪽으로 색상이 부드럽게 번져 나가는 원형 그라디언트 효과를 만들 수 있으며, 모든 최신 브라우저에서 지원됩니다.

반면, 위에서 아래로 또는 왼쪽에서 오른쪽처럼 직선 방향으로 색이 변하는 그라디언트가 필요하다면 <linearGradient> 태그를 사용하면 됩니다.

주요 속성

cx, cy: 그라디언트 중심점의 x, y 좌표
r: 그라디언트의 반지름
fx, fy: 그라디언트 초점(focal point)의 x, y 좌표

예제: SVG 방사형 그라디언트 타원

아래는 HTML5 버전의 SVG 예제입니다. <ellipse> 태그로 타원을 그리고, <radialGradient> 태그로 정의한 그라디언트를 fill 속성에 적용해 채우는 방식입니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset="utf-8" />
   </head>
   <body>
      <h2 align="center">HTML5 SVG Gradient Ellipse</h2>
      <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
         <defs>
            <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
               <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
               <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
            </radialGradient>
         </defs>
         <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
      </svg>
   </body>
</html>

코드 설명

<defs> 요소 안에 그라디언트를 정의하여 재사용할 수 있도록 합니다.
<stop> 요소는 그라디언트의 색상 전환 지점을 나타냅니다. 이 예제에서는 오프셋 0% 위치에서 투명한 회색(rgb(200,200,200), 불투명도 0), 100% 위치에서 불투명한 파란색(rgb(0,0,255))으로 설정했습니다.
<ellipse> 태그의 style 속성에서 fill:url(#gradient)를 통해 정의된 그라디언트를 참조합니다.

이 코드를 실행하면 중앙은 투명하고 가장자리로 갈수록 파란색이 진해지는 방사형 그라디언트가 적용된 타원을 확인할 수 있습니다.

HTML5 태그 – SVG 방사형 그라디언트 완벽 가이드

HTML5 <radialGradient> 태그란?

주요 속성

예제: SVG 방사형 그라디언트 타원

코드 설명