Thẻ svg nhúng hình và chữ trong HTML
Trình soạn thảo - Thẻ svg nhúng hình và chữ trong HTML
Kết quả - Thẻ svg nhúng hình và chữ trong HTML
Tự code rồi chạy thử...
Chạy Thử
<!DOCTYPE html>
<html>
<head>
<title>Thẻ svg nhúng hình và chữ trong HTML</title>
</head>
<body>
<h1>Thẻ svg nhúng hình và chữ trong HTML</h1>
<!--Nếu trình duyệt không hỗ trợ SVG nội tuyến thì hiện thông báo rất tiếc-->
<!--Chiều rộng svg: 500px, chiều cao svg: 130px-->
<svg width="500" height="130">
<defs>
<!--Tạo màu nền để gắn vào fill của ellipse-->
<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>
<!--Tạo hình ellipse, gắn màu nền từ id grad1-->
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<!--Chữ màu trắng, left:50px, top:86px, kích thước chữ 45px, font Verdana-->
<text fill="#ffffff" font-size="45" font-family="Verdana"
x="50" y="86">SVG</text>
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG nội tuyến.
</svg>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Thẻ svg nhúng hình và chữ trong HTML</title>
</head>
<body>
<h1>Thẻ svg nhúng hình và chữ trong HTML</h1>
<!--Nếu trình duyệt không hỗ trợ SVG nội tuyến thì hiện thông báo rất tiếc-->
<!--Chiều rộng svg: 500px, chiều cao svg: 130px-->
<svg width="500" height="130">
<defs>
<!--Tạo màu nền để gắn vào fill của ellipse-->
<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>
<!--Tạo hình ellipse, gắn màu nền từ id grad1-->
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<!--Chữ màu trắng, left:50px, top:86px, kích thước chữ 45px, font Verdana-->
<text fill="#ffffff" font-size="45" font-family="Verdana"
x="50" y="86">SVG</text>
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG nội tuyến.
</svg>
</body>
</html>
- Thẻ svg nhúng hình và chữ trong HTML nằm trong bài viết Thẻ svg trong HTML
- ★★★★★ ★★★★★