Thẻ <radialGradient> HTML5

Thẻ HTML5 được sử dụng để vẽ SVG Gradients. Có, các trình duyệt hiện đại hỗ trợ nó.

Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một hình elip bằng thẻ và sẽ sử dụng thẻ để xác định một gradient xuyên tâm SVG. Theo cách tương tự, bạn có thể sử dụng thẻ để tạo độ dốc tuyến tính SVG.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset="utf-8" />
   </head>
   <body>
      <h2 align="center">HTML5 SVG Gradient Ellipse</h2>
      <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
      <defs>
         <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
            <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
         </radialGradient>
      </defs>
      <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
      </svg>
   </body>
</html>