Cách vẽ ngôi sao (star) trong HTML5 SVG?

SVG (Scalable Vector Graphics) là ngôn ngữ mô tả đồ họa 2D bằng XML. Trình duyệt hiển thị SVG giống như PNG, JPG, GIF nhưng vector ( phóng to không mờ).

Để vẽ đa giác (polygon) trong SVG, dùng thẻ <polygon>. Vẽ ngôi sao bằng cách đặt tọa độ x, y cho các đỉnh.

Ví dụ: Vẽ ngôi sao 5 cánh

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 SVG Ngôi sao</title>
    <style>
        #svgelem {
            position: relative;
            left: 10%;
            transform: translateX(-20%);
        }
    </style>
</head>
<body>
    <h2>Ngôi sao SVG</h2>
    <svg id="svgelem" width="300" height="300" xmlns="https://www.w3.org/2000/svg">
        <polygon points="100,10 40,180 190,60 10,60 160,180" fill="gold" stroke="orange" stroke-width="2"/>
    </svg>
</body>
</html>

Giải thích tọa độ (points):

Ngôi sao 5 cánh có 10 đỉnh (5 ngoài, 5 trong). Cặp số x,y cách nhau bởi dấu phẩy, các đỉnh cách nhau bởi khoảng trắng.

points="x1,y1 x2,y2 x3,y3 ..."
100,10    → đỉnh trên cùng
40,180    → dưới trái
190,60    → phải giữa
10,60     → trái giữa
160,180   → dưới phải

Thuộc tính SVG hữu ích:

• fill: Màu tô (gold, #FFD700, rgb...).
• stroke: Màu viền.
• stroke-width: Độ dày viền.
• opacity: Độ trong suốt (0-1).
• transform: rotate, scale, translate.

Ưu điểm SVG: Vector (không mờ khi zoom), có thể CSS style, JS thao tác DOM, accessibility tốt (text trong SVG có thể select, read).