Làm quen với thẻ Polygon trong SVG

Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svgwidth='200'height='200'style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình đa giác bằng thẻ polygon, với điểm bắt đầu tại điểm x = 65, y = 50 và đi đến các điểm còn lại: <svgwidth='200'height='200'style='background: cyan'><polygonpoints='65,50 135,70 150,150 50,150'/></svg> Cuối cùng, mình sẽ thêm


Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau:

<svgwidth='200'height='200'style='background: cyan'></svg>

Tiếp theo, mình sẽ tạo hình đa giác bằng thẻ polygon, với điểm bắt đầu tại điểm x = 65, y = 50 và đi đến các điểm còn lại:

<svgwidth='200'height='200'style='background: cyan'><polygonpoints='65,50 135,70 150,150 50,150'/></svg>

Cuối cùng, mình sẽ thêm một số thuộc tính màu nền, viền như bên dưới:

<svgwidth='200'height='200'style='background: cyan'>
   <polygonpoints='65,50 135,70 150,150 50,150'fill='blue'stroke='orange'stroke-width='4'/></svg>

Bây giờ, bạn có thể tạo một hình đa giác bằng SVG thật dễ dàng!

Nguồn: www.naututs.com

Nguồn: viblo.asia

Bài viết liên quan

7 Cách Tăng Tốc Ứng Dụng React Hiệu Quả Mà Bạn Có Thể Làm Ngay

React là một thư viện JavaScript phổ biến trong việc xây dựng giao diện người d

Trung Quốc “thả quân bài tẩy”: hàng loạt robot hình người!

MỘT CUỘC CÁCH MẠNG ROBOT ĐANG HÌNH THÀNH Ở TRUNG QUỐC Thượng Hải, ngày 13/5 –

9 Mẹo lập trình Web “ẩn mình” giúp tiết kiệm hàng giờ đồng hồ

Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian x

Can GPT-4o Generate Images? All You Need to Know about GPT-4o-image

OpenAI‘s GPT-4o, introduced on March 25, 2025, has revolutionized the way we create visual con