# SVG 그레디언트

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

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

```markup
<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 사각형](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LESo6chIFLEaPiCbCGq%2Fimage.png?alt=media\&token=f16f8510-2262-4806-b35e-f73b29f38e77)

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

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

```markup
<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 사각형](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LESp41peRHLYKcK-8q5%2Fimage.png?alt=media\&token=6b131b40-f675-4ca5-99cf-fff05807f3bd)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-gradients.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.