SVG 방사형 그라디언트: fx와 fy로 밝은 부분 옮기기

그림 자체를 움직이지 않고 SVG 방사형 그라디언트의 밝은 부분을 옮기려면 <radialGradient>의 fx와 fy를 설정하세요. cx, cy, r, 경로는 그대로 둡니다. fr="0"일 때 색 변화는 초점에서 시작하고, 끝 원은 계속 바깥쪽 범위를 결정합니다. 밝은 부분이 늘어나 보인다면 윤곽을 편집하기 전에 gradientUnits와 도형의 경계 상자를 확인하세요.

이 안내에서는 구멍이 있는 가로로 긴 육각형 엠블럼을 직접 만들어 사용합니다. 가운데 초점과 이동한 초점을 비교한 다음, 객체 기준 타원과 사용자 좌표계의 원이라는 두 가지 채색 정의를 비교합니다. SVG는 코드로 직접 작성했습니다. 트레이싱 서비스나 편집기로 만든 시험 파일이 아닙니다.

초점과 끝 원을 구분하기

방사형 그라디언트에는 시작 원과 끝 원이 있습니다. 이 시작 예제에서는 fr="0"으로 시작 원을 점으로 줄입니다. fx와 fy는 그 점의 위치를 정하고, cx, cy, r은 끝 원을 정의합니다. 초점 좌표를 설정하지 않으면 각각 대응하는 중심 좌표가 기본값이 됩니다. MDN의 radialGradient 참고 문서는 이러한 속성과 기본값을 설명합니다.

다음 변경은 서로 다른 작업으로 생각하세요.

가로 초점 좌표는 fx이고 세로 좌표는 fy입니다. 둘을 함께 바꾸면 시작점이 대각선 방향으로 움직입니다. 경로의 점이나 구멍의 위치는 바뀌지 않습니다.

초점을 옮긴 완전한 SVG 복사하기

다음을 emblem.svg로 저장하고 브라우저에서 여세요. 외부 이미지나 스타일시트에 의존하지 않습니다.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="-20 0 200 120">
  <defs>
    <radialGradient id="highlight" gradientUnits="objectBoundingBox"
                    cx=".5" cy=".5" r=".6" fx=".22" fy=".18" fr="0" spreadMethod="pad">
      <stop offset="0" stop-color="#fff1d8"/>
      <stop offset=".45" stop-color="#ed805f"/>
      <stop offset="1" stop-color="#6f284c"/>
    </radialGradient>
  </defs>
  <path d="M20 20 H140 L160 60 L140 100 H20 L0 60 Z M50 38 H110 L130 60 L110 82 H50 L30 60 Z" fill="url(#highlight)" fill-rule="evenodd"/>
</svg>

가운데 초점을 가진 대조군을 만들려면 fx=".22" fy=".18"만 fx=".5" fy=".5"로 바꾸세요. 다른 속성과 d의 두 윤곽은 그대로 둡니다.

바깥 윤곽은 x=0부터 160까지, y=20부터 100까지 이어집니다. 두 번째 윤곽은 구멍을 정의합니다. fill-rule="evenodd"가 그 구멍을 칠하지 않게 유지하므로 그라디언트를 옮겨도 구멍이 채워지지 않습니다. MDN의 fill-rule 참고 문서는 이 복합 경로에 쓰인 교차 횟수 규칙을 설명합니다.

가운데 초점은 구멍 안에 있으므로 가장 밝은 점 자체는 보이지 않습니다. 고리에서는 그 주변의 색 변화가 보입니다. 이동한 초점은 왼쪽 위의 채워진 띠 위에 놓여 가장 밝은 색상 정지점이 드러납니다. 좌표를 바꿔도 변화가 거의 없어 보일 때 이 차이를 확인하세요. 초점이 로고의 투명한 부분 뒤에 있을 수 있습니다.

가로로 긴 엠블럼에서 타원형 색 변화가 생기는 이유

gradientUnits="objectBoundingBox"에서는 좌표가 채색할 객체의 경계를 기준으로 합니다. 이 엠블럼의 경계는 160 × 80이며, SVG 캔버스의 200 × 120과는 다릅니다. 정규화된 원은 정사각형이 아닌 상자에 매핑되면서 타원이 됩니다. MDN의 gradientUnits 참고 문서는 이 매핑을 설명합니다.

여기서 cx=".5" cy=".5"는 (80, 60)으로 매핑됩니다. 반지름 .6은 가로 반지름 96, 세로 반지름 48로 매핑됩니다. 이동한 초점의 좌표는 다음과 같습니다.

x = 0 + .22 × 160 = 35.2
y = 20 + .18 × 80 = 34.4

변환이 적용되지 않은 이 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 그라디언트 단위를 참고하세요.

직접 만든 파일의 브라우저 비교 결과

작성한 SVG 네 개를 모두 Chrome에서 열고 각각 100 × 60 및 300 × 180 CSS 픽셀로 표시했습니다. 큰 버전에서는 왼쪽 위의 밝은 부분을 살펴보기 쉬웠습니다. 작은 크기에서도 같은 이동이 보였으며 모든 시험 파일에서 구멍은 투명하게 유지됐습니다.

브라우저의 소스 보고서에서는 네 파일 모두 경로 하나, 이미지 요소 없음, 동일한 d 값, 동일한 160 × 80 경로 경계가 확인됐습니다. 원본 캔버스 크기에서 픽셀값을 별도로 읽어 채색 변화를 확인했습니다.

왼쪽 위 표본은 그림 좌표 (35, 30), 구멍 표본은 (80, 60)에서 얻었습니다. 이 관찰은 해당 원본과 브라우저 세션에 관한 것입니다. 다른 렌더러의 출력이나 편집기의 가져오기 동작까지 입증하지는 않습니다.

초점과 채색 경계

조정하는 동안 초점을 안쪽에 유지하기

안쪽 초점과 fr="0"으로 시작하세요. 정규화 좌표에서 이동한 초점과 중심의 거리는 약 .425로 반지름 .6보다 작습니다. 사용자 좌표계 버전에서는 거리가 약 51.6으로 64보다 작습니다. 두 경우 모두 원이 정의된 좌표계에서 시작점이 끝 원의 안쪽에 있습니다.

오래된 설명에서는 바깥쪽 초점이 항상 끝 원 위로 제한된다고 할 수 있습니다. SVG 2는 시작 원이 바깥에 놓이는 것을 허용하며, 그라디언트 원뿔 바깥에 칠하지 않는 영역이 생기는 등 다른 동작을 정의합니다. SVG 2 방사형 그라디언트 규격은 이 변경을 설명합니다. 이 시작 예제는 안쪽 점을 사용하며, 여러 브라우저에서 바깥쪽 초점 렌더링을 시험하지는 않았습니다.

위치를 확인하는 동안 spreadMethod="pad"를 유지하세요. 그라디언트 범위 바깥에서 pad는 마지막 정지점의 색을 사용합니다. repeat와 reflect는 반복 동작을 추가해 초점 비교를 어렵게 할 수 있습니다. MDN의 spreadMethod 참고 문서는 이 선택지를 정의합니다.

전달하기 전에 SVG를 표시할 환경에서 다음 세 가지를 확인하세요.

1. 실제 표시 크기에서 밝은 부분이 의도한 채워진 띠 위에 놓여 있는지 확인합니다.
2. 구멍이 투명하게 유지되고 경로 데이터가 원본과 일치하는지 확인합니다.
3. 선택한 원이나 타원이 로고의 비율에 어울리는지 확인합니다.

내보낸 뒤 색이 달라진다면 SVG를 내보내면 색이 바뀌는 이유를 참고해 채색과 전달 환경을 점검하세요. 초점 이동은 위치 편집이므로 색상 정지점의 색까지 동시에 바꾸면 비교하기 어려워집니다.

도형 복원과 채색 디자인을 별도 작업으로 다루기

같은 경로에 단색 채우기를 적용하고 구멍을 유지해 이 엠블럼의 단색 원본을 보관하세요. 그라디언트 버전은 필요한 웹용 그림으로 따로 저장합니다. 그라디언트는 윤곽에 할당된 채색입니다. 이 초점 좌표가 추가 절단 경로를 정의하지는 않습니다.

시작할 로고가 PNG나 JPG로만 있다면 PerfectVector 로고 벡터화 도구로 벡터 도형을 복원하고 확인한 뒤 채색을 다시 구성할 수 있습니다. 바깥 윤곽과 구멍을 점검한 다음 SVG 작업 과정에서 그라디언트 좌표를 설정하세요. 래스터 이미지의 밝은 부분에는 원래의 fx, fy, 반지름이 복구 가능한 디자인 매개변수로 남아 있지 않습니다. 이미 깔끔한 벡터 윤곽이 있다면 그라디언트를 직접 편집하세요. 그라디언트 벡터화 가이드는 래스터를 벡터로 바꿀지 결정하는 과정을 다룹니다.

자주 묻는 질문

SVG 방사형 그라디언트의 밝은 부분은 어떻게 옮기나요? radialGradient에 fx와 fy 좌표를 명시하세요. 변화를 비교하는 동안 cx, cy, r, 색상 정지점, 경로는 고정합니다. fr이 0이면 초점 좌표가 색 변화의 시작점 위치를 정합니다.

SVG에서 방사형 그라디언트가 타원처럼 보이는 이유는 무엇인가요? objectBoundingBox 단위에서는 정규화된 원이 채색할 객체의 경계에 매핑됩니다. 경계가 정사각형이 아니면 타원이 됩니다. 변환하지 않은 SVG에서는 userSpaceOnUse 좌표를 명시해 그림 단위의 원형 영역을 정의할 수 있습니다.

초점을 옮기면 로고의 구멍이 채워지나요? 아닙니다. 구멍은 복합 경로와 채우기 규칙이 결정합니다. 이 예제는 evenodd를 사용하고 모든 시험 파일에 같은 경로를 유지하므로, 초점이 움직여도 구멍은 투명하게 남습니다.

벡터화로 원래 그라디언트의 초점 좌표를 복구할 수 있나요? 래스터 이미지는 원래 SVG 그라디언트 매개변수를 보존하지 않습니다. 필요하다면 윤곽을 복원해 점검한 다음 채색을 다시 구성하고, 실제 표시 환경에서 밝은 부분을 확인하세요.

출처

1. MDN radialGradient — 시작 원과 끝 원의 속성 및 기본값입니다.
2. MDN fx — 가로 초점 좌표의 의미입니다.
3. MDN fy — 세로 초점 좌표의 의미입니다.
4. MDN fill-rule — 구멍에 적용되는 홀짝 채우기 동작입니다.
5. MDN gradientUnits — 객체 경계, 사용자 좌표계, 타원 매핑을 설명합니다.
6. SVG 2 방사형 그라디언트 — 시작 원의 기하학적 구조와 바깥쪽 초점에 관한 규격 변경입니다.
7. MDN spreadMethod — pad, repeat, reflect의 동작입니다.