Thẻ HTML <svg>
Ví dụ
Vẽ một vòng tròn:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
</svg>
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thẻ <svg>
xác định vùng chứa cho đồ họa SVG.
SVG có một số phương pháp để vẽ đường dẫn, hộp, hình tròn, văn bản và hình ảnh đồ họa.
Để tìm hiểu thêm về SVG, vui lòng đọc Hướng dẫn SVG của chúng tôi.
Hỗ trợ trình duyệt
Element | |||||
---|---|---|---|---|---|
<svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
Thêm ví dụ
Ví dụ
Vẽ hình chữ nhật:
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
Hãy tự mình thử »Ví dụ
Vẽ hình vuông có các góc tròn:
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20"
width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Hãy tự mình thử »Ví dụ
Vẽ một ngôi sao:
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78
10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Hãy tự mình thử »Ví dụ
Vẽ logo SVG:
<svg height="130" width="500">
<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="100" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
<text fill="#ffffff" font-size="45"
font-family="Verdana" x="50" y="86">SVG</text>
</svg>
Hãy tự mình thử »Trang liên quan
Hướng dẫn HTML: HTML SVG
Hướng dẫn SVG: Hướng dẫn SVG