Dần tiến SVG

SVG hiệu ứng chuyển màu

Hiệu ứng chuyển màu là sự chuyển đổi mượt mà từ một màu sang màu khác. Ngoài ra, có thể áp dụng nhiều màu chuyển đổi trên cùng một yếu tố.

SVG có hai loại hiệu ứng chuyển màu chính:

  • Hiệu ứng chuyển màu tuyến tính
  • Hiệu ứng chuyển màu phóng to

SVG hiệu ứng chuyển màu tuyến tính - <linearGradient>

<linearGradient> Các yếu tố này được sử dụng để định nghĩa hiệu ứng chuyển màu tuyến tính.

<linearGradient> Các yếu tố phải được nhúng trong <defs> Trong dấu phôi.<defs> Các yếu tố là viết tắt của định nghĩa (definitions), bao gồm các định nghĩa cho các yếu tố đặc biệt (ví dụ như lọc).

Hiệu ứng chuyển màu tuyến tính có thể được định nghĩa là chuyển màu ngang, dọc hoặc góc:

  • Tạo hiệu ứng chuyển màu ngang khi y1 và y2 bằng nhau và x1 và x2 không bằng nhau
  • Tạo hiệu ứng chuyển màu dọc khi x1 và x2 bằng nhau và y1 và y2 không bằng nhau
  • Tạo hiệu ứng chuyển màu góc khi x1 và x2 khác nhau và y1 và y2 không bằng nhau

Ví dụ 1

Định nghĩa một hình tròn, có sự chuyển đổi từ vàng sang đỏ theo hướng ngang tuyến tính:

Đây là mã SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" 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="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Thử ngay

Giải thích mã:

  • Thuộc tính id của thẻ <linearGradient> xác định tên duy nhất của sự chuyển đổi
  • 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 sự chuyển đổi
  • Màu sắc của sự chuyển đổi có thể được tạo thành từ hai hoặc nhiều màu sắc. Mỗi màu sắc được chỉ định bởi 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 sự chuyển đổi
  • Thuộc tính fill sẽ liên kết phần tử hình tròn tròn với sự chuyển đổi

Ví dụ 2

Định nghĩa một hình tròn tròn, có từ vàng đến đỏ là độ dốc tuyến tính dọc:

Đây là mã SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Thử ngay

Ví dụ 3

Định nghĩa một hình tròn tròn, thêm văn bản vào bên trong hình tròn tròn, nó có từ vàng đến đỏ là độ dốc tuyến tính ngang:

SVG

Đây là mã SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" 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="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

Thử ngay

Giải thích mã:

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