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

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


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

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

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

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:

<svg width='200' height='200' style='background: cyan'>
   <polygon points='65,50 135,70 150,150 50,150'/>
</svg>

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

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:

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

Làm quen với thẻ Polygon trong SVG 8
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

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *