Dải màu tuyến tính SVG

Dịch chuyển SVG phải được định nghĩa trong thẻ <defs>.

Dịch chuyển SVG

Dịch chuyển là sự chuyển đổi mượt mà từ màu này sang màu khác. Ngoài ra, bạn có thể áp dụng nhiều màu chuyển đổi vào cùng một phần tử.

Trong SVG, có hai loại dịch chuyển chính:

  • Dịch chuyển tuyến tính
  • Dịch chuyển bức xạ

Dịch chuyển tuyến tính

Thẻ <linearGradient> được sử dụng để định nghĩa dịch chuyển tuyến tính của SVG.

Thẻ <linearGradient> phải được nhúng trong nội bộ thẻ <defs>. <defs> là viết tắt của definitions, nó có thể định nghĩa các phần tử đặc biệt như dịch chuyển.

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

  • Khi y1 và y2 bằng nhau, trong khi x1 và x2 khác nhau, bạn có thể tạo ra dịch chuyển ngang.
  • Khi x1 và x2 bằng nhau, trong khi y1 và y2 khác nhau, bạn có thể tạo ra dịch chuyển dọc.
  • Khi x1 và x2 khác nhau, và y1 và y2 khác nhau, bạn có thể tạo ra dịch chuyển góc.

Vui lòng sao chép mã dưới đây vào sổ ghi chú, sau đó lưu tệp dưới dạng "linear1.svg". Đặt tệp này vào thư mục web của bạn:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Giải thích mã:

  • Thuộc tính id của thẻ <linearGradient> có thể đặt tên duy nhất cho dịch chuyển.
  • Thuộc tính fill:url(#orange_red) liên kết phần tử ellipse này với dịch chuyển.
  • Thuộc tính x1, x2, y1, y2 của thẻ <linearGradient> có thể xác định vị trí bắt đầu và kết thúc của dịch chuyển.
  • Màu sắc dịch chuyển có thể được tạo ra từ hai hoặc nhiều màu. Mỗi màu được quy định bởi một thẻ <stop>. offset thuộc tính được sử dụng để xác định vị trí bắt đầu và kết thúc của dịch chuyển.

Xem ví dụ (dịch chuyển mờ ngang)

Một ví dụ khác:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Xem ví dụ (dải màu dốc)