SVG Gradients - Radial

SVG Radial Gradient - <radialGradient>

Phần tử <radialGradient> được sử dụng để xác định một gradient xuyên tâm.

Phần tử <radialGradient> phải được lồng trong thẻ <defs>. Thẻ <defs> là viết tắt của các định nghĩa và chứa định nghĩa của các phần tử đặc biệt (chẳng hạn như gradient).

ví dụ 1

Xác định một hình elip với một gradient xuyên tâm từ trắng sang xanh lam:

Đây là mã SVG:

Giải thích mã:

• Thuộc tính id của thẻ <radialGradient> xác định tên duy nhất cho gradient
• Các thuộc tính cx, cy và r xác định vòng tròn ngoài cùng và fx và fy xác định vòng tròn trong cùng
• Phạm vi màu cho một gradient có thể bao gồm hai hoặc nhiều màu. Mỗi màu được chỉ định bằng thẻ <stop>. Thuộc tính offset được sử dụng để xác định vị trí bắt đầu và kết thúc của màu gradient
• Thuộc tính điền liên kết phần tử hình elip với gradient

Ví dụ 2

Xác định một hình elip khác với gradient xuyên tâm từ trắng sang xanh lam:

Đây là mã SVG: