×

Cách sử dụng thẻ <ellipse> để tạo hình elip trong SVG trong HTML

Avatar of admin
admin 0 Views

Trong HTML, SVG (Scalable Vector Graphics) là một công cụ mạnh mẽ cho phép tạo và quản lý các hình ảnh vector phức tạp. Một trong những thẻ hữu dụng mà SVG cung cấp là <ellipse>, được sử dụng để vẽ hình elip. Đây là một cách tuyệt vời để tạo ra các yếu tố hình học phong phú cho trang web của bạn mà không cần sử dụng đến hình ảnh bitmap.

Để vẽ một hình elip trong SVG, bạn cần hiểu rõ các thuộc tính của thẻ <ellipse>. Dưới đây là các thuộc tính chính mà bạn sẽ sử dụng:

  1. cx (Center x): Đây là tọa độ x của trung tâm elip. Tọa độ này được tính từ cạnh trái của khung chứa SVG.
  2. cy (Center y): Đây là tọa độ y của trung tâm elip, tính từ cạnh trên của khung chứa SVG.
  3. rx (Radius x): Đây là bán kính của elip theo chiều ngang.
  4. ry (Radius y): Đây là bán kính của elip theo chiều dọc.

Bên cạnh các thuộc tính cơ bản trên, bạn cũng có thể áp dụng các thuộc tính khác như fill (màu nội dung), stroke (màu đường viền), và stroke-width (độ rộng của đường viền) để tùy chỉnh hình elip của mình. Dưới đây là một ví dụ cụ thể:

<svg width="200" height="200">
  <ellipse cx="100" cy="100" rx="80" ry="50" fill="blue" stroke="black" stroke-width="2"/>
</svg>

Giải thích ví dụ:

  • svg: Khởi tạo một khung SVG với chiều rộng (width) và chiều cao (height) là 200 đơn vị.
  • ellipse: Vẽ một hình elip với các thuộc tính như sau:
    • cx="100" và cy="100": Xác định trung tâm elip tại tọa độ (100, 100).
    • rx="80" và ry="50": Xác định bán kính ngang là 80 đơn vị và bán kính dọc là 50 đơn vị.
    • fill="blue": Tô màu nội dung elip là màu xanh dương.
    • stroke="black": Đường viền của elip có màu đen.
    • stroke-width="2": Độ rộng của đường viền là 2 đơn vị.

Một điều cần lưu ý là đơn vị mặc định cho các giá trị tọa độ và kích thước trong SVG là điểm ảnh (pixels). Tuy nhiên, bạn có thể sử dụng các đơn vị khác như phần trăm (%) để làm cho hình elip tương thích tốt hơn với bố cục responsive.

Ví dụ nâng cao:

<svg width="100%" height="100%">
  <ellipse cx="50%" cy="50%" rx="30%" ry="20%" fill="yellow" stroke="red" stroke-width="4"/>
</svg>

Trong ví dụ này, tỷ lệ phần trăm (%) được sử dụng để xác định kích thước và vị trí của elip, giúp hình elip điều chỉnh theo kích thước của khung chứa SVG.

Tính năng mở rộng và tùy chỉnh:

Ngoài ra, bạn có thể thêm các hiệu ứng khác như độ mờ (opacity), gradient màu (gradient), hay các hiệu ứng hoạt hình (animations) để làm cho hình elip trở nên sống động hơn.

Ví dụ về gradient màu:

<svg width="300" height="200">
  <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="150" cy="100" rx="100" ry="50" fill="url(#grad1)" />
</svg>

Trong ví dụ này, linearGradient được định nghĩa trong thẻ <defs> và sử dụng để tô màu chuyển đổi từ màu vàng sang màu đỏ cho elip.

Nắm vững cách sử dụng thẻ <ellipse> trong SVG sẽ mở ra vô vàn cơ hội sáng tạo cho bạn trong việc thiết kế trang web. Đừng ngại thử nghiệm với các thuộc tính khác nhau để sáng tạo ra những hình ảnh đẹp mắt và ấn tượng.

Comments

Bài viết liên quan