×

Cách sử dụng thẻ <line> để vẽ đường thẳng trong SVG trong HTML

Avatar of admin
admin 0 Views

Trong lập trình web hiện đại, SVG (Scalable Vector Graphics) là một định dạng hình ảnh vector phổ biến vì tính linh hoạt và khả năng mở rộng mà nó mang lại. Một trong những yếu tố cơ bản của SVG là thẻ <line>, thẻ này rất hữu ích trong việc vẽ các đường thẳng. Bài viết này sẽ hướng dẫn cách sử dụng thẻ <line> để vẽ đường thẳng trong SVG trong HTML qua các bước cơ bản và chi tiết.

Hiểu Cấu Trúc Của Thẻ <line>

Thẻ <line> trong SVG có một số thuộc tính quan trọng cần nắm rõ, bao gồm:

  • x1: Tọa độ x của điểm bắt đầu đường thẳng.
  • y1: Tọa độ y của điểm bắt đầu đường thẳng.
  • x2: Tọa độ x của điểm kết thúc đường thẳng.
  • y2: Tọa độ y của điểm kết thúc đường thẳng.
  • stroke: Màu sắc của đường thẳng.
  • stroke-width: Độ dày của đường thẳng.

Ví Dụ Cơ Bản

Dưới đây là một ví dụ cơ bản về cách sử dụng thẻ <line> để vẽ một đường thẳng:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="10" x2="190" y2="190" stroke="black" stroke-width="2"/>
</svg>

Trong ví dụ trên, đường thẳng được vẽ từ tọa độ (10,10) đến (190,190) với màu đen và độ dày là 2px.

Tùy Chỉnh Đường Thẳng

Để làm cho đường thẳng thêm phần phức tạp và hấp dẫn, bạn có thể tùy chỉnh các thuộc tính của nó, chẳng hạn như thay đổi màu sắc, kiểu dáng, và độ mờ.

Đổi Màu Đường Thẳng

Bạn có thể thay đổi màu của đường thẳng bằng cách thay đổi giá trị của thuộc tính stroke:

<line x1="10" y1="10" x2="190" y2="10" stroke="red" stroke-width="2"/>

Điều Chỉnh Độ Dày

Cũng có thể thay đổi độ dày của đường thẳng bằng cách thay đổi giá trị của thuộc tính stroke-width:

<line x1="10" y1="30" x2="190" y2="30" stroke="blue" stroke-width="5"/>

Kiểu Dáng Đường Thẳng

SVG hỗ trợ nhiều kiểu dáng khác nhau cho đường thẳng, sử dụng thuộc tính stroke-dasharray để tạo các đường nét đứt:

<line x1="10" y1="50" x2="190" y2="50" stroke="green" stroke-width="2" stroke-dasharray="5,5"/>

Tích Hợp SVG vào HTML

Cuối cùng, khi xây dựng trang web, bạn cần tích hợp mã SVG vào HTML. Dưới đây là một ví dụ về cách thực hiện điều này:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ví dụ về SVG</title>
</head>
<body>
  <h1>Ví dụ về Đường Thẳng SVG</h1>
  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="10" x2="190" y2="190" stroke="black" stroke-width="2"/>
  </svg>
</body>
</html>

Kết Luận

Việc sử dụng thẻ <line> để vẽ đường thẳng trong SVG là một kỹ năng cơ bản nhưng vô cùng quan trọng trong lập trình web. Bằng cách hiểu và tận dụng các thuộc tính của thẻ này, bạn có thể tạo ra các đường thẳng với nhiều kiểu dáng và màu sắc khác nhau, từ đó nâng cao tính thẩm mỹ và chuyên nghiệp cho trang web của mình. Hãy bắt đầu thử nghiệm và sáng tạo với thẻ <line> để khám phá thêm nhiều khả năng mà SVG mang lại.

Comments

Bài viết liên quan