SVG Gradients - Tuyến tính

SVG Gradients

Gradient là một sự chuyển đổi mượt mà từ màu này sang màu khác. Ngoài ra, một số chuyển đổi màu có thể được áp dụng cho cùng một phần tử.

Có hai loại gradient chính trong SVG:

• Tuyến tính
• Xuyên tâm

SVG Linear Gradient - <linearGradient>

Phần tử <linearGradient> được sử dụng để xác định một gradient tuyến tính.

Phần tử <linearGradient> 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).

Gradient tuyến tính có thể được định nghĩa là gradient ngang, dọc hoặc góc:

• Gradient ngang được tạo ra khi y1 và y2 bằng nhau và x1 và x2 khác nhau
• Các gradient dọc được tạo ra khi x1 và x2 bằng nhau và y1 và y2 khác nhau
• Các gradient góc được tạo ra khi x1 và x2 khác nhau và y1 và y2 khác nhau

ví dụ 1

Xác định một hình elip với một gradient tuyến tính nằm ngang từ màu vàng sang màu đỏ:

Đây là mã SVG:

Giải thích mã:

• Thuộc tính id của thẻ <linearGradient> xác định tên duy nhất cho gradient
• Các thuộc tính x1, x2, y1, y2 của thẻ <linearGradient> xác định vị trí bắt đầu và kết thúc của gradient
• 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 với một gradient tuyến tính dọc từ màu vàng sang màu đỏ:

Đây là mã SVG:

Ví dụ 3

Xác định hình elip với gradient tuyến tính nằm ngang từ màu vàng sang màu đỏ và thêm văn bản bên trong hình elip:

Đây là mã SVG:

Giải thích mã:

• Phần tử <text> được sử dụng để thêm văn bản