HTML5 16 – Các cách vẽ trong SVG HTML5

0
51

Bài số 15 trước, tôi đã giới thiệu cho các bạn về thẻ <svg> trong HTML, và bài hôm nay, chúng ta sẽ đi thực hành các ví dụ thực tế với thẻ này.

Vẽ đường tròn

Đường tròn được vẽ thông qua phần tử circle với các thuộc tính:

  • cx, cy là tọa độ tâm
  • r là bán kính
  • stroke là màu viền
  • strole-width là độ rộng viền
  • fill là màu cần tô bên trong đường tròn

Ví dụ:

Vẽ hình chữ nhật

Tương tự, hình chữ nhật cũng có chiều rộng và chiều cao và thuộc tính style.

Ví dụ SVG vẽ một hình chữ nhật sử dụng tag <rect>:

Vẽ hình chữ nhật bo tròn 4 góc:

Vẽ đường thẳng

Ví dụ SVG vẽ một đường thẳng sử dụng tag <line>:

Bạn có thể sử dụng thuộc tính style mà cho phép bạn thiết lập thông số style bổ sung như nét, màu, độ rộng của nét, …

Vẽ đường gấp khúc

Dùng <polyline> để vẽ đường gấp khúc, trong đó thuộc tính points theo tứ tự chỉ ra các tọa độ x,y của các điểm cần nối lại với nhau:

Vẽ hình sao

Để vẽ hình sao, bạn có thể dùng phần tử <polygon> và định nghĩa 5 điểm đỉnh của ngôi sao.

Vẽ hình Ellipse

Ví dụ SVG vẽ một hình Ellipse sử dụng tag <ellipse>:

Vẽ hình đa giác

Ví dụ SVG vẽ một hình đa giác sử dụng tag <polygon>:

Vẽ logo

Để thêm chữ vào SVG bắt đầu tại tọa độ (x,y) thì sử dụng <text>. <text> có các thuộc tính: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing, text-decoration.

  • tspan: Dùng để định dạng thêm chữ trong text
  • textPath: Vẽ text theo một đường cho trước

Ví dụ tổng quát: Ví dụ này kết hợp các phương thức vẽ hình ellipse, vẽ văn bản và vẽ Gradient.

Ảnh động SVG

Sử dụng <animate> để tạo ảnh động, ví dụ:

Trong <animate> có các thuộc tính:

  • attributeName : chỉ ra thuộc tính sẽ bị tác động để tạo ảnh động.
  • from : giá trị thuộc tính nhận được ban đầu
  • to : giá trị thuộc tính nhận được ở điểm cuối của hoạt động
  • dur : thời gian ảnh động diễn ra
  • fill : cách thiết lập khởi tạo tạo khi bắt đầu động remove khởi tạo giá trị, freeze giữ giá trị ban đầu.
  • repeatCount : chỉ ra số lần lặp lại (indefinite lặp lại vô tận)

Kết luận

Như vậy bạn đã học và tìm hiểu về SVG với các ví dụ minh họa trong bài này. Để vẽ đồ họa các hình phức tạp bằng SVG không dễ chút nào đúng không. Các bạn cần xem kỹ lại và thực hành để quen cách vẽ nhé.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây