<radialGradient> HTML5 tag

แท็ก <radialGradient> HTML5 ใช้วาด SVG Gradients ใช่ เบราว์เซอร์สมัยใหม่รองรับ

ตัวอย่าง HTML5 SVG วาด ellipse ด้วย <ellipse> และใช้ <radialGradient> กำหนด SVG radial gradient คล้ายกันใช้ <linearGradient> สร้าง linear gradient

<!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>