Đầ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>
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>
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>
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