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>
  • Thẻ svg nhúng hình và chữ trong HTML nằm trong bài viết Thẻ svg trong HTML