×

Cách sử dụng thẻ <circle> để tạo hình tròn trong SVG trong HTML

Avatar of admin
admin 0 Views

Khi nói đến việc tạo hình tròn trong SVG trong HTML, thẻ <circle> là một công cụ mạnh mẽ và dễ sử dụng. SVG, viết tắt của Scalable Vector Graphics, là một phương tiện giúp tạo ra các đồ họa hình học dưới dạng mã hóa, phù hợp với các trang web và ứng dụng tương tác. Bài viết này sẽ tập trung vào cách sử dụng thẻ <circle> để tạo hình tròn, cùng với các thuộc tính quan trọng của nó.

Bắt đầu với SVG

Trước khi đi vào chi tiết về thẻ <circle>, điều đầu tiên bạn cần hiểu là cách nhúng SVG vào tài liệu HTML. Thẻ <svg> là phần tử chủ của SVG và xác định vùng chứa cho đồ họa của bạn.

<svg width="200" height="200">
    <!-- Các phần tử SVG sẽ đặt ở đây -->
</svg>

Thẻ <svg> có thể chứa nhiều phần tử đồ họa khác nhau, bao gồm cả các hình tròn. Hãy cùng tìm hiểu cách thẻ <circle> hoạt động bên trong vùng chứa này.

Thẻ <circle>

Thẻ <circle> được sử dụng để vẽ hình tròn. Các thuộc tính cơ bản của nó bao gồm:

  • cx: Toạ độ X của tâm hình tròn.
  • cy: Toạ độ Y của tâm hình tròn.
  • r: Bán kính của hình tròn.

Ví dụ đơn giản dưới đây sẽ tạo ra một hình tròn với tâm tại toạ độ (50, 50) và bán kính là 40:

<svg width="200" height="200">
    <circle cx="50" cy="50" r="40" />
</svg>

Các thuộc tính bổ sung

Ngoài các thuộc tính cơ bản, thẻ <circle> còn hỗ trợ nhiều thuộc tính khác giúp tùy chỉnh giao diện của hình tròn. Một số thuộc tính quan trọng bao gồm:

  • fill: Màu nền bên trong hình tròn.
  • stroke: Màu viền của hình tròn.
  • stroke-width: Độ rộng của viền.

Dưới đây là ví dụ sử dụng những thuộc tính này:

<svg width="200" height="200">
    <circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="3" />
</svg>

Trong ví dụ này, hình tròn có nền màu xanh, viền màu đen và rộng 3 đơn vị.

Sử dụng CSS để tùy chỉnh

Ngoài việc sử dụng trực tiếp các thuộc tính trong thẻ <circle>, bạn cũng có thể sử dụng CSS để tùy chỉnh hình tròn. Điều này giúp tách biệt giữa mã HTML và các định nghĩa kiểu dáng của bạn, làm cho mã nguồn trở nên sáng sủa và dễ quản lý hơn.

<svg width="200" height="200">
    <circle cx="50" cy="50" r="40" class="my-circle" />
</svg>

<style>
    .my-circle {
        fill: red;
        stroke: black;
        stroke-width: 4;
    }
</style>

Thực hành nâng cao

Cuối cùng, hãy thử kết hợp nhiều hình tròn và các phần tử SVG khác để tạo thành đồ họa phức tạp hơn. SVG rất mạnh mẽ và linh hoạt, cho phép tạo các hiệu ứng tương tác cũng như đồ họa phức tạp.

Ví dụ, dưới đây là mã tạo ra ba hình tròn chồng lên nhau với các màu và kích thước khác nhau:

<svg width="200" height="200">
    <circle cx="50" cy="50" r="40" fill="red" />
    <circle cx="150" cy="50" r="40" fill="green" />
    <circle cx="100" cy="150" r="40" fill="blue" />
</svg>

Kết luận

Việc sử dụng thẻ <circle> để tạo hình tròn trong SVG rất đơn giản và hiệu quả. Với các thuộc tính cơ bản và bổ sung, bạn có thể tạo ra các hình tròn với nhiều kiểu dáng và màu sắc khác nhau. Hơn nữa, sử dụng CSS để tùy chỉnh hình tròn giúp mã nguồn trở nên rõ ràng và dễ quản lý hơn. Hãy thử nghiệm thêm nhiều tính năng của SVG để tối đa hóa sự sáng tạo của bạn trong việc thiết kế đồ họa trên web.

Comments

Bài viết liên quan