SVG 그레디언트

리니어 그레디언트(Linear Gradient)

선형 그레디언트를 그려 요소에 매핑 하는 방법은 다음과 같습니다. <defs> 요소 내에 <linearGradient> 요소를 정의한 후, 그레디언트를 적용할 요소 fill 속성에 참조 연결합니다. <linearGradient> 요소 내부에는 <stop> 요소를 2개 이상 사용해 그레디언트 컬러 스톱을 설정할 수 있습니다.

<svg>

  <defs>
    <linearGradient id="bl-g" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#00a2ff" />

      <stop offset="100%" stop-color="#004d80" />
    
</linearGradient>
  </defs>
  
  <rect 
  
    fill="url(#bl-g)" 
    x="0" y="0" 
    width="100" height="100" />
    
</svg>

그레디언트가 적용된 SVG 사각형

레이디얼 그레디언트(Radial Gradient)

원형 그레디언트를 그려 요소에 매핑 하는 방법 또한 선형 그레디언트와 유사합니다. 다만 <radialGradient> 원 중심(cx, cy)과 반지름(r), 초점(fx, fy)을 설정하는 점이 다릅니다.

<svg>

  <defs> 
    <radialGradient id="yr-rg" cx="50%" cy="50%" r="50%" fx="20%" fy="20%">

      <stop offset="0%" stop-color="#ffc054" />
  
      <stop offset="100%" stop-color="#ff614b" />

    </radialGradient>
  </defs>
  
  <rect 
  
    fill="url(#yr-rg)" 
    x="0" y="0" 
    width="100" height="100" />
    
</svg>

원형 그레디언트가 매핑된 SVG 사각형