Độ dốc tuyến tính SVG

Độ dốc SVG

Chuyển màu là sự chuyển tiếp suôn sẻ từ màu này sang màu khác. Ngoài ra, một số hiệu ứng chuyển màu có thể được áp dụng cho cùng một phần tử.

Có hai loại gradient trong SVG:

• Độ dốc tuyến tính - được xác định bằng <linearGradient>
• Độ dốc xuyên tâm - được xác định bằng <radialGradient>

Các định nghĩa độ dốc được đặt trong phần tử <defs> hoặc <svg> . Phần tử <defs> là viết tắt của "định nghĩa" và chứa định nghĩa của các phần tử đặc biệt (chẳng hạn như độ dốc).

Mỗi gradient phải có thuộc tính id xác định gradient. Đồ họa/hình ảnh sau đó trỏ đến độ dốc để sử dụng.

Độ dốc tuyến tính SVG - <tuyến tínhGradient>

Phần tử <linearGradient> được sử dụng để xác định độ dốc tuyến tính (chuyển đổi tuyến tính từ màu này sang màu khác, từ hướng này sang hướng khác).

Phần tử <linearGradient> thường được lồng trong phần tử <defs> .

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

• Độ dốc tuyến tính ngang (đây là mặc định) đi từ trái sang phải (trong đó x1 và x2 khác nhau và y1 và y2 bằng nhau)
• Độ dốc tuyến tính dọc đi từ trên xuống dưới (trong đó x1 và x2 bằng nhau và y1 và y2 khác nhau)
• Độ dốc tuyến tính góc được tạo khi x1 và x2 khác nhau và y1 và y2 khác nhau

Độ dốc tuyến tính ngang

Một hình elip có độ dốc tuyến tính nằm ngang chuyển từ màu vàng sang màu đỏ:

Đây là mã SVG:

Giải thích mã:

• Thuộc tính id của phần tử <linearGradient> xác định tên duy nhất cho gradient
• Các thuộc tính x1 , x2 , y1 , y2 của phần tử <linearGradient> xác định điểm bắt đầu và điểm kết thúc x và y của gradient
• Màu sắc của một gradient được xác định bằng hai hoặc nhiều phần tử <stop>
• Thuộc tính stop-color trong <stop> xác định màu của điểm dừng chuyển màu
• Thuộc tính offset trong <stop> xác định vị trí đặt điểm dừng gradient
• Thuộc tính fill của phần tử <ellipse> trỏ phần tử tới gradient "grad1"

Độ dốc tuyến tính ngang

Một hình elip có độ dốc tuyến tính nằm ngang chuyển từ màu vàng sang xanh lục sang đỏ:

Đây là mã SVG:

Độ dốc tuyến tính dọc

Một hình elip có độ dốc tuyến tính dọc chuyển từ màu vàng sang màu đỏ:

Đây là mã SVG:

Dải tuyến tính ngang với văn bản

Một hình elip có độ dốc 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

Độ dốc tuyến tính góc

Một hình elip có độ dốc tuyến tính góc cạnh chuyển từ màu vàng sang màu đỏ:

Đây là mã SVG:

Thuộc tính SVG <tuyến tínhGradient>