> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG 방사형 그라디언트: fx와 fy로 밝은 부분 옮기기 > fx와 fy로 SVG 방사형 그라디언트의 밝은 부분을 옮기고 원형·타원형 채색을 비교하세요. 엠블럼의 윤곽과 투명한 구멍은 그대로 유지합니다. Source: https://perfectvector.com/ko/blog/svg-radial-gradient-focus Language: ko Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 그림 자체를 움직이지 않고 SVG 방사형 그라디언트의 밝은 부분을 옮기려면 ``의 `fx`와 `fy`를 설정하세요. `cx`, `cy`, `r`, 경로는 그대로 둡니다. `fr="0"`일 때 색 변화는 초점에서 시작하고, 끝 원은 계속 바깥쪽 범위를 결정합니다. 밝은 부분이 늘어나 보인다면 윤곽을 편집하기 전에 `gradientUnits`와 도형의 경계 상자를 확인하세요. 이 안내에서는 구멍이 있는 가로로 긴 육각형 엠블럼을 직접 만들어 사용합니다. 가운데 초점과 이동한 초점을 비교한 다음, 객체 기준 타원과 사용자 좌표계의 원이라는 두 가지 채색 정의를 비교합니다. SVG는 코드로 직접 작성했습니다. 트레이싱 서비스나 편집기로 만든 시험 파일이 아닙니다. ## 초점과 끝 원을 구분하기 방사형 그라디언트에는 시작 원과 끝 원이 있습니다. 이 시작 예제에서는 `fr="0"`으로 시작 원을 점으로 줄입니다. `fx`와 `fy`는 그 점의 위치를 정하고, `cx`, `cy`, `r`은 끝 원을 정의합니다. 초점 좌표를 설정하지 않으면 각각 대응하는 중심 좌표가 기본값이 됩니다. [MDN의 radialGradient 참고 문서](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient)는 이러한 속성과 기본값을 설명합니다. 다음 변경은 서로 다른 작업으로 생각하세요. | 원하는 변화 | 수정할 항목 | 비교 중 고정할 항목 | | ---------------------------- | ------------------------------ | ------------------ | | 가장 밝은 영역을 왼쪽 위로 옮기기 | `fx`와 `fy` | 끝 원 좌표, 색상 정지점, 경로 | | 전체 채색 영역 옮기기 | `cx`와 `cy`를 수정하고 명시한 초점 좌표도 검토 | 경로 | | 채색이 미치는 범위 바꾸기 | `r` | 중심, 초점, 경로 | | 가로로 긴 도형에서도 채색 영역을 원형으로 유지하기 | 사용자 좌표계 선택 | 모든 좌표값과 반지름 검토 | 가로 초점 좌표는 [`fx`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx)이고 세로 좌표는 [`fy`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy)입니다. 둘을 함께 바꾸면 시작점이 대각선 방향으로 움직입니다. 경로의 점이나 구멍의 위치는 바뀌지 않습니다. ## 초점을 옮긴 완전한 SVG 복사하기 다음을 `emblem.svg`로 저장하고 브라우저에서 여세요. 외부 이미지나 스타일시트에 의존하지 않습니다. ```svg ``` 가운데 초점을 가진 대조군을 만들려면 `fx=".22" fy=".18"`만 `fx=".5" fy=".5"`로 바꾸세요. 다른 속성과 `d`의 두 윤곽은 그대로 둡니다. 바깥 윤곽은 `x=0`부터 `160`까지, `y=20`부터 `100`까지 이어집니다. 두 번째 윤곽은 구멍을 정의합니다. `fill-rule="evenodd"`가 그 구멍을 칠하지 않게 유지하므로 그라디언트를 옮겨도 구멍이 채워지지 않습니다. [MDN의 fill-rule 참고 문서](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule)는 이 복합 경로에 쓰인 교차 횟수 규칙을 설명합니다. 가운데 초점은 구멍 안에 있으므로 가장 밝은 점 자체는 보이지 않습니다. 고리에서는 그 주변의 색 변화가 보입니다. 이동한 초점은 왼쪽 위의 채워진 띠 위에 놓여 가장 밝은 색상 정지점이 드러납니다. 좌표를 바꿔도 변화가 거의 없어 보일 때 이 차이를 확인하세요. 초점이 로고의 투명한 부분 뒤에 있을 수 있습니다. ## 가로로 긴 엠블럼에서 타원형 색 변화가 생기는 이유 `gradientUnits="objectBoundingBox"`에서는 좌표가 채색할 객체의 경계를 기준으로 합니다. 이 엠블럼의 경계는 `160 × 80`이며, SVG 캔버스의 `200 × 120`과는 다릅니다. 정규화된 원은 정사각형이 아닌 상자에 매핑되면서 타원이 됩니다. [MDN의 gradientUnits 참고 문서](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits)는 이 매핑을 설명합니다. 여기서 `cx=".5" cy=".5"`는 `(80, 60)`으로 매핑됩니다. 반지름 `.6`은 가로 반지름 `96`, 세로 반지름 `48`로 매핑됩니다. 이동한 초점의 좌표는 다음과 같습니다. ```text x = 0 + .22 × 160 = 35.2 y = 20 + .18 × 80 = 34.4 ``` 변환이 적용되지 않은 이 SVG에서 끝 영역을 원형으로 만들려면 그라디언트의 좌표 속성을 다음과 같이 바꿉니다. ```svg gradientUnits="userSpaceOnUse" cx="80" cy="60" r="64" fx="35.2" fy="34.4" fr="0" spreadMethod="pad" ``` 가운데 초점 대조군은 `fx="80" fy="60"`을 사용합니다. 이제 반지름은 두 방향 모두 사용자 단위 `64`입니다. 이는 `96 × 48` 타원과는 다른 끝 영역을 선택한 것입니다. 좌표 정의와 물리적 반지름을 함께 바꿨으므로, 이 비교는 단위 설정만 바꾼 효과를 분리하지 않습니다. 각각의 가운데 초점·이동 초점 쌍 안에서는 초점 좌표만 바뀝니다. 색 변화가 각 도형의 비율을 따라야 한다면 객체 기준 채색을 사용하세요. 위치와 원형 범위가 그림의 좌표에 맞아야 한다면 명시적인 사용자 좌표값을 사용합니다. 서로 분리된 로고 경로에 하나의 색 변화를 공유하려면 [SVG 그라디언트 단위](https://perfectvector.com/ko/blog/svg-gradient-units)를 참고하세요. ## 직접 만든 파일의 브라우저 비교 결과 작성한 SVG 네 개를 모두 Chrome에서 열고 각각 `100 × 60` 및 `300 × 180` CSS 픽셀로 표시했습니다. 큰 버전에서는 왼쪽 위의 밝은 부분을 살펴보기 쉬웠습니다. 작은 크기에서도 같은 이동이 보였으며 모든 시험 파일에서 구멍은 투명하게 유지됐습니다. 브라우저의 소스 보고서에서는 네 파일 모두 경로 하나, 이미지 요소 없음, 동일한 `d` 값, 동일한 `160 × 80` 경로 경계가 확인됐습니다. 원본 캔버스 크기에서 픽셀값을 별도로 읽어 채색 변화를 확인했습니다. | 채색 정의 | 초점 | 왼쪽 위 RGBA 표본 | 구멍의 알파 | | ----------------- | --- | -------------------- | ------ | | 객체 경계, 반지름 `.6` | 가운데 | `164, 77, 84, 255` | `0` | | 객체 경계, 반지름 `.6` | 이동 | `246, 184, 155, 255` | `0` | | 사용자 좌표계, 반지름 `64` | 가운데 | `149, 67, 82, 255` | `0` | | 사용자 좌표계, 반지름 `64` | 이동 | `248, 196, 168, 255` | `0` | 왼쪽 위 표본은 그림 좌표 `(35, 30)`, 구멍 표본은 `(80, 60)`에서 얻었습니다. 이 관찰은 해당 원본과 브라우저 세션에 관한 것입니다. 다른 렌더러의 출력이나 편집기의 가져오기 동작까지 입증하지는 않습니다. **초점과 채색 경계** ![엠블럼의 밝은 부분 위치를 비교하고 채색 경계 안내선을 보여 주는 개념 삽화.](https://perfectvector.com/blog/svg-radial-gradient-focus/focus-and-bounds.webp) *삽화: 윤곽을 바꾸지 않고도 밝은 부분을 옮길 수 있습니다. 안내선은 채색의 기하학적 구조를 설명하며, 브라우저 시험 파일이나 트레이싱 결과가 아닙니다.* ## 조정하는 동안 초점을 안쪽에 유지하기 안쪽 초점과 `fr="0"`으로 시작하세요. 정규화 좌표에서 이동한 초점과 중심의 거리는 약 `.425`로 반지름 `.6`보다 작습니다. 사용자 좌표계 버전에서는 거리가 약 `51.6`으로 `64`보다 작습니다. 두 경우 모두 원이 정의된 좌표계에서 시작점이 끝 원의 안쪽에 있습니다. 오래된 설명에서는 바깥쪽 초점이 항상 끝 원 위로 제한된다고 할 수 있습니다. SVG 2는 시작 원이 바깥에 놓이는 것을 허용하며, 그라디언트 원뿔 바깥에 칠하지 않는 영역이 생기는 등 다른 동작을 정의합니다. [SVG 2 방사형 그라디언트 규격](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients)은 이 변경을 설명합니다. 이 시작 예제는 안쪽 점을 사용하며, 여러 브라우저에서 바깥쪽 초점 렌더링을 시험하지는 않았습니다. 위치를 확인하는 동안 `spreadMethod="pad"`를 유지하세요. 그라디언트 범위 바깥에서 `pad`는 마지막 정지점의 색을 사용합니다. `repeat`와 `reflect`는 반복 동작을 추가해 초점 비교를 어렵게 할 수 있습니다. [MDN의 spreadMethod 참고 문서](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod)는 이 선택지를 정의합니다. 전달하기 전에 SVG를 표시할 환경에서 다음 세 가지를 확인하세요. 1. 실제 표시 크기에서 밝은 부분이 의도한 채워진 띠 위에 놓여 있는지 확인합니다. 2. 구멍이 투명하게 유지되고 경로 데이터가 원본과 일치하는지 확인합니다. 3. 선택한 원이나 타원이 로고의 비율에 어울리는지 확인합니다. 내보낸 뒤 색이 달라진다면 [SVG를 내보내면 색이 바뀌는 이유](https://perfectvector.com/ko/blog/why-svg-colors-change-after-export)를 참고해 채색과 전달 환경을 점검하세요. 초점 이동은 위치 편집이므로 색상 정지점의 색까지 동시에 바꾸면 비교하기 어려워집니다. ## 도형 복원과 채색 디자인을 별도 작업으로 다루기 같은 경로에 단색 채우기를 적용하고 구멍을 유지해 이 엠블럼의 단색 원본을 보관하세요. 그라디언트 버전은 필요한 웹용 그림으로 따로 저장합니다. 그라디언트는 윤곽에 할당된 채색입니다. 이 초점 좌표가 추가 절단 경로를 정의하지는 않습니다. 시작할 로고가 PNG나 JPG로만 있다면 [PerfectVector 로고 벡터화 도구](https://perfectvector.com/ko/vectorize-logo)로 벡터 도형을 복원하고 확인한 뒤 채색을 다시 구성할 수 있습니다. 바깥 윤곽과 구멍을 점검한 다음 SVG 작업 과정에서 그라디언트 좌표를 설정하세요. 래스터 이미지의 밝은 부분에는 원래의 `fx`, `fy`, 반지름이 복구 가능한 디자인 매개변수로 남아 있지 않습니다. 이미 깔끔한 벡터 윤곽이 있다면 그라디언트를 직접 편집하세요. [그라디언트 벡터화 가이드](https://perfectvector.com/ko/blog/vectorize-gradients)는 래스터를 벡터로 바꿀지 결정하는 과정을 다룹니다. ## 자주 묻는 질문 **SVG 방사형 그라디언트의 밝은 부분은 어떻게 옮기나요?** radialGradient에 fx와 fy 좌표를 명시하세요. 변화를 비교하는 동안 cx, cy, r, 색상 정지점, 경로는 고정합니다. fr이 0이면 초점 좌표가 색 변화의 시작점 위치를 정합니다. **SVG에서 방사형 그라디언트가 타원처럼 보이는 이유는 무엇인가요?** objectBoundingBox 단위에서는 정규화된 원이 채색할 객체의 경계에 매핑됩니다. 경계가 정사각형이 아니면 타원이 됩니다. 변환하지 않은 SVG에서는 userSpaceOnUse 좌표를 명시해 그림 단위의 원형 영역을 정의할 수 있습니다. **초점을 옮기면 로고의 구멍이 채워지나요?** 아닙니다. 구멍은 복합 경로와 채우기 규칙이 결정합니다. 이 예제는 evenodd를 사용하고 모든 시험 파일에 같은 경로를 유지하므로, 초점이 움직여도 구멍은 투명하게 남습니다. **벡터화로 원래 그라디언트의 초점 좌표를 복구할 수 있나요?** 래스터 이미지는 원래 SVG 그라디언트 매개변수를 보존하지 않습니다. 필요하다면 윤곽을 복원해 점검한 다음 채색을 다시 구성하고, 실제 표시 환경에서 밝은 부분을 확인하세요. ## 출처 1. [MDN radialGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) — 시작 원과 끝 원의 속성 및 기본값입니다. 2. [MDN fx](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx) — 가로 초점 좌표의 의미입니다. 3. [MDN fy](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy) — 세로 초점 좌표의 의미입니다. 4. [MDN fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — 구멍에 적용되는 홀짝 채우기 동작입니다. 5. [MDN gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — 객체 경계, 사용자 좌표계, 타원 매핑을 설명합니다. 6. [SVG 2 방사형 그라디언트](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) — 시작 원의 기하학적 구조와 바깥쪽 초점에 관한 규격 변경입니다. 7. [MDN spreadMethod](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) — pad, repeat, reflect의 동작입니다. ## Explore - [Read the HTML article](https://perfectvector.com/ko/blog/svg-radial-gradient-focus) - [SVG 경로를 따라가는 그라디언트: 곡선의 색상 확인하기](https://perfectvector.com/ko/blog/svg-gradient-curved-stroke.md) - [SVG feColorMatrix: 채우기 변경 없이 색상 바꾸기](https://perfectvector.com/ko/blog/svg-fecolormatrix.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)