> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Chuyển sắc tỏa tròn SVG: dời vùng sáng bằng fx và fy

> Di chuyển vùng sáng của chuyển sắc tỏa tròn SVG bằng fx và fy, so sánh màu tô tròn và elip, đồng thời giữ nguyên đường viền và khoảng trống trong suốt của biểu trưng.

Source: https://perfectvector.com/vi/blog/svg-radial-gradient-focus

Language: vi
Author: Irene Kim
Published: 2026-10-02T08:00:00+09:00
Updated: 2026-10-02T08:00:00+09:00

Để di chuyển vùng sáng của chuyển sắc tỏa tròn SVG mà không di chuyển hình, đặt `fx` và `fy` trên `<radialGradient>`. Giữ nguyên `cx`, `cy`, `r` và đường dẫn. Với `fr="0"`, điểm tiêu bắt đầu quá trình chuyển màu; đường tròn cuối vẫn kiểm soát phạm vi ngoài. Nếu vùng sáng trông bị kéo giãn, kiểm tra `gradientUnits` và hộp bao của hình trước khi sửa đường bao.

Hướng dẫn này dùng một biểu trưng lục giác rộng gốc có khoảng trống. Chúng tôi so sánh vùng sáng ở giữa và lệch, rồi so sánh hai định nghĩa màu tô được chọn: elip tương đối theo đối tượng và hình tròn trong không gian người dùng. SVG được tạo trực tiếp bằng mã. Không có dịch vụ đồ lại hay trình chỉnh sửa nào tạo mẫu này.

## Tách điểm tiêu khỏi đường tròn cuối

Chuyển sắc tỏa tròn có đường tròn đầu và đường tròn cuối. Trong mã khởi đầu này, `fr="0"` thu đường tròn đầu thành một điểm. `fx` và `fy` đặt vị trí điểm đó; `cx`, `cy` và `r` xác định đường tròn cuối. Không đặt tọa độ tiêu sẽ khiến chúng mặc định bằng tọa độ tâm tương ứng. [Tài liệu tham khảo radialGradient của MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) mô tả các thuộc tính và giá trị mặc định đó.

Hãy xem các chỉnh sửa là những công việc khác nhau:

| Thay đổi mong muốn                          | Chỉnh sửa                                       | Giữ cố định để so sánh                            |
| ------------------------------------------- | ----------------------------------------------- | ------------------------------------------------- |
| Di chuyển vùng sáng nhất lên phía trên trái | `fx` và `fy`                                    | Tọa độ đường tròn cuối, các điểm màu và đường dẫn |
| Di chuyển toàn bộ vùng màu tô               | `cx` và `cy`, có xem xét tọa độ tiêu tường minh | Đường dẫn                                         |
| Đổi tầm phủ của màu tô                      | `r`                                             | Tâm, điểm tiêu và đường dẫn                       |
| Giữ vùng tô hình tròn trên hình rộng        | Chọn tọa độ không gian người dùng               | Xem lại mọi giá trị tọa độ và bán kính            |

Tọa độ tiêu ngang là [`fx`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx); tọa độ dọc là [`fy`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy). Đổi cả hai di chuyển điểm bắt đầu theo đường chéo. Việc đó không đổi các điểm của đường dẫn hay di chuyển khoảng trống.

## Sao chép SVG hoàn chỉnh có vùng sáng lệch

Lưu thành `emblem.svg` và mở trong trình duyệt. Tệp không phụ thuộc vào ảnh hay bảng kiểu bên ngoài.

```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>
```

Để tạo đối chứng ở giữa, chỉ đổi `fx=".22" fy=".18"` thành `fx=".5" fy=".5"`. Giữ nguyên các thuộc tính khác và cả hai đường bao trong `d`.

Đường bao ngoài trải từ `x=0` đến `160` và `y=20` đến `100`. Đường bao thứ hai xác định khoảng trống. `fill-rule="evenodd"` giữ khoảng trống đó không được tô; di chuyển chuyển sắc không lấp nó. [Tài liệu tham khảo fill-rule của MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) giải thích quy tắc giao cắt dùng cho đường dẫn phức hợp này.

Điểm tiêu ở giữa nằm trong khoảng trống, nên bản thân điểm sáng nhất không nhìn thấy. Bạn vẫn thấy quá trình chuyển màu xung quanh trên vòng. Điểm tiêu lệch nằm trên dải đặc phía trên trái, nơi điểm màu sáng nhất trở nên nhìn thấy được. Phân biệt này hữu ích khi sửa tọa độ dường như ít tác dụng: điểm tiêu có thể nằm sau một phần trong suốt của biểu trưng.

## Vì sao biểu trưng rộng có chuyển sắc elip

Với `gradientUnits="objectBoundingBox"`, tọa độ mô tả phạm vi của đối tượng được tô. Phạm vi biểu trưng của chúng tôi là `160 × 80`, dù vùng vẽ SVG là `200 × 120`. Đường tròn chuẩn hóa được ánh xạ qua hộp không vuông đó thành elip. [Tài liệu tham khảo gradientUnits của MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) mô tả phép ánh xạ này.

Ở đây `cx=".5" cy=".5"` ánh xạ tới `(80, 60)`. Bán kính `.6` ánh xạ thành bán kính ngang và dọc `96` và `48`. Điểm tiêu lệch được ánh xạ thành:

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

Để có vùng cuối hình tròn trong SVG không biến đổi này, thay các thuộc tính tọa độ chuyển sắc bằng:

```svg
gradientUnits="userSpaceOnUse"
cx="80" cy="60" r="64"
fx="35.2" fy="34.4" fr="0" spreadMethod="pad"
```

Đối chứng ở giữa của nó dùng `fx="80" fy="60"`. Bán kính giờ là `64` đơn vị người dùng theo cả hai hướng. Đây là vùng cuối được chọn khác với elip `96 × 48`. Chúng tôi đổi định nghĩa tọa độ và bán kính vật lý; phép so sánh này không chỉ cô lập việc chuyển tùy chọn đơn vị. Trong mỗi cặp ở giữa/lệch, chỉ tọa độ tiêu thay đổi.

Dùng màu tô tương đối theo đối tượng khi chuyển sắc cần đi theo tỷ lệ của từng hình. Dùng các số không gian người dùng tường minh khi vị trí và phạm vi tròn thuộc tọa độ của hình. Với chuyển sắc dùng chung trên các đường dẫn logo riêng, xem [đơn vị chuyển sắc SVG](https://perfectvector.com/vi/blog/svg-gradient-units).

## So sánh trình duyệt gốc cho thấy điều gì

Chúng tôi mở cả bốn SVG tự tạo trong Chrome và hiển thị mỗi tệp ở `100 × 60` và `300 × 180` pixel CSS. Phiên bản lớn giúp kiểm tra vùng sáng phía trên trái dễ hơn. Cùng độ lệch vẫn nhìn thấy ở kích thước nhỏ hơn, còn khoảng trống giữ trong suốt trong mọi mẫu.

Báo cáo nguồn của trình duyệt tìm thấy một đường dẫn, không có phần tử image, các giá trị `d` giống hệt và cùng phạm vi đường dẫn `160 × 80` trong cả bốn tệp. Các lần đọc pixel riêng ở kích thước vùng vẽ nguồn xác nhận màu tô thay đổi:

| Định nghĩa màu tô                    | Điểm tiêu | Mẫu RGBA phía trên trái | Alpha khoảng trống |
| ------------------------------------ | --------- | ----------------------- | ------------------ |
| Phạm vi đối tượng, bán kính `.6`     | Ở giữa    | `164, 77, 84, 255`      | `0`                |
| Phạm vi đối tượng, bán kính `.6`     | Lệch      | `246, 184, 155, 255`    | `0`                |
| Không gian người dùng, bán kính `64` | Ở giữa    | `149, 67, 82, 255`      | `0`                |
| Không gian người dùng, bán kính `64` | Lệch      | `248, 196, 168, 255`    | `0`                |

Mẫu phía trên trái ở tọa độ hình `(35, 30)`; mẫu khoảng trống ở `(80, 60)`. Những quan sát này mô tả nguồn và phiên trình duyệt này. Chúng không xác lập đầu ra của bộ kết xuất khác hay hành vi nhập của trình chỉnh sửa.

**Điểm tiêu và ranh giới màu tô**

![Minh họa khái niệm so sánh vị trí vùng sáng trên các biểu trưng và thể hiện đường hướng dẫn ranh giới màu tô.](https://perfectvector.com/blog/svg-radial-gradient-focus/focus-and-bounds.webp)

*Minh họa: vùng sáng có thể di chuyển trong đường bao giữ nguyên. Các đường hướng dẫn giải thích hình học màu tô; đây không phải mẫu trình duyệt hay kết quả đồ lại.*

## Giữ điểm tiêu bên trong khi tinh chỉnh biểu trưng

Bắt đầu với điểm tiêu bên trong và `fr="0"`. Trong tọa độ chuẩn hóa, khoảng cách từ điểm tiêu lệch đến tâm khoảng `.425`, nhỏ hơn bán kính `.6` của chúng tôi. Trong phiên bản không gian người dùng, khoảng cách khoảng `51.6`, nhỏ hơn `64`. Cả hai lựa chọn giữ điểm bắt đầu bên trong đường tròn cuối trong hệ tọa độ định nghĩa đường tròn đó.

Các giải thích cũ có thể nói điểm tiêu bên ngoài luôn bị ép lên đường tròn cuối. SVG 2 cho phép đường tròn đầu nằm ngoài và định nghĩa hành vi khác, gồm các vùng không tô bên ngoài nón chuyển sắc. [Đặc tả chuyển sắc tỏa tròn SVG 2](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) giải thích thay đổi đó. Mã khởi đầu này dùng các điểm bên trong; chúng tôi không kiểm thử kết xuất điểm tiêu ngoài trên nhiều trình duyệt.

Giữ `spreadMethod="pad"` khi kiểm tra vị trí. Ngoài phạm vi chuyển sắc, `pad` dùng màu của điểm màu cuối; `repeat` và `reflect` đưa vào hành vi lặp có thể che khuất việc so sánh điểm tiêu. [Tài liệu tham khảo spreadMethod của MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) định nghĩa những lựa chọn đó.

Trước khi bàn giao, kiểm tra ba điều trong môi trường sẽ hiển thị SVG:

1. Vùng sáng nằm trên dải đặc dự kiến ở kích thước hiển thị thực.
2. Khoảng trống vẫn trong suốt và dữ liệu đường dẫn còn khớp với bản chính.
3. Hình tròn hoặc elip được chọn phù hợp tỷ lệ của biểu trưng.

Nếu màu thay đổi sau khi xuất, kiểm tra màu tô và ngữ cảnh bàn giao theo [vì sao màu SVG đổi sau khi xuất](https://perfectvector.com/vi/blog/why-svg-colors-change-after-export). Di chuyển điểm tiêu là chỉnh sửa vị trí, nên đổi màu các điểm màu cùng lúc khiến phép so sánh khó đọc hơn.

## Tách khôi phục hình học khỏi thiết kế màu tô

Giữ bản chính phẳng của biểu trưng bằng cách dùng cùng đường dẫn với màu tô đặc và giữ khoảng trống. Lưu phiên bản chuyển sắc riêng cho hình web cần nó. Chuyển sắc là màu tô được gán cho một đường bao; các tọa độ tiêu này không định nghĩa đường cắt bổ sung.

Nếu logo ban đầu chỉ có ở dạng PNG hoặc JPG, [công cụ vector hóa logo của PerfectVector](https://perfectvector.com/vi/vectorize-logo) có thể khôi phục hình học vector để kiểm tra trước khi bạn dựng lại màu tô này. Kiểm tra đường bao ngoài và khoảng trống, rồi đặt tọa độ chuyển sắc trong quy trình SVG. Vùng sáng raster không giữ `fx`, `fy` hay bán kính gốc thành các tham số thiết kế có thể khôi phục. Nếu đã có đường bao vector sạch, chỉnh sửa chuyển sắc trực tiếp. [Hướng dẫn vector hóa chuyển sắc](https://perfectvector.com/vi/blog/vectorize-gradients) trình bày quyết định raster thành vector.

## Câu hỏi thường gặp

**Làm thế nào để di chuyển vùng sáng của chuyển sắc tỏa tròn SVG?**
Đặt tọa độ fx và fy tường minh trên radialGradient. Giữ cx, cy, r, các điểm màu và đường dẫn cố định khi so sánh thay đổi. Khi fr bằng 0, những tọa độ tiêu đó đặt điểm bắt đầu quá trình chuyển màu.

**Tại sao chuyển sắc tỏa tròn trông như elip trong SVG của tôi?**
Với đơn vị objectBoundingBox, đường tròn chuẩn hóa được ánh xạ qua phạm vi đối tượng được tô. Phạm vi không vuông tạo ra elip. Trong SVG không biến đổi, tọa độ userSpaceOnUse tường minh có thể định nghĩa vùng tròn theo đơn vị của hình.

**Di chuyển điểm tiêu có lấp khoảng trống của logo không?**
Không. Đường dẫn phức hợp và quy tắc tô của nó quyết định khoảng trống. Ví dụ này dùng evenodd và giữ cùng đường dẫn trong mọi mẫu; khoảng trống vẫn trong suốt khi điểm tiêu di chuyển.

**Vector hóa có khôi phục tọa độ tiêu của chuyển sắc gốc không?**
Ảnh raster không giữ các tham số chuyển sắc SVG gốc. Khôi phục và kiểm tra đường bao khi cần, rồi dựng lại màu tô và kiểm tra vùng sáng trong môi trường hiển thị dự kiến.

## Nguồn tham khảo

1. [MDN radialGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) — Thuộc tính đường tròn đầu/cuối và giá trị mặc định.
2. [MDN fx](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx) — Ý nghĩa tọa độ tiêu ngang.
3. [MDN fy](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy) — Ý nghĩa tọa độ tiêu dọc.
4. [MDN fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — Hành vi tô chẵn-lẻ cho khoảng trống.
5. [MDN gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — Phạm vi đối tượng, không gian người dùng và ánh xạ elip.
6. [Chuyển sắc tỏa tròn SVG 2](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) — Hình học đường tròn đầu và thay đổi đặc tả điểm tiêu ngoài.
7. [MDN spreadMethod](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) — Hành vi pad, repeat và reflect.

## Explore

- [Read the HTML article](https://perfectvector.com/vi/blog/svg-radial-gradient-focus)
- [Chuyển sắc SVG dọc đường dẫn: kiểm tra màu ở khúc cong](https://perfectvector.com/vi/blog/svg-gradient-curved-stroke.md)
- [SVG feColorMatrix: Đổi màu mà không thay màu tô](https://perfectvector.com/vi/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)