SVG 원형 변화

SVG 방사형 그레이더 - <radialGradient>

<radialGradient> 태그는 방사형 그레이더(放射渐变) 정의에 사용됩니다.

<radialGradient> 태그는 <defs> 태그 내부에 있습니다.<defs> element는 정의(definitions)의 약자로, 특수 요소(예: 필터) 정의를 포함합니다.

예제 1

하얀색에서 파란색으로 변하는 원형의 방사형 그레이더를 정의합니다：

이 SVG 코드는 다음과 같습니다：

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

직접 시도해 보세요

코드 설명：

  • <radialGradient> 태그의 id 속성은 그레이더의 독특한 이름을 정의합니다
  • cx, cy, r 속성은 가장 외층의 원을 정의하며, fx, fy는 가장 내층의 원을 정의합니다
  • 그레이더의 색상 범위는 두 가지 또는 그 이상의 색상으로 구성될 수 있습니다. 각 색상은 <stop> 태그로 지정됩니다
  • offset 속성은 그레이더 색상의 시작과 끝 위치를 정의합니다
  • fill 속성은 원형 요소가 그레이더에 연결되도록 합니다

예제 2

하얀색에서 파란색으로 변하는 원형의 방사형 그레이더를 정의합니다：

이 SVG 코드는 다음과 같습니다：

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

직접 시도해 보세요