কম্পিউটার টিউটোরিয়াল

<radialGradient> HTML5 ট্যাগ

<radialGradient> HTML5 ট্যাগ SVG গ্রেডিয়েন্ট আঁকতে ব্যবহৃত হয়। হ্যাঁ, আধুনিক ব্রাউজারগুলো এটি সমর্থন করে।

নিচেরটি একটি SVG উদাহরণের HTML5 ভার্সন যা <ellipse> ট্যাগ ব্যবহার করে একটি উপবৃত্ত আঁকে এবং <radialGradient> ট্যাগ ব্যবহার করে একটি SVG র‍্যাডিয়াল গ্রেডিয়েন্ট সংজ্ঞায়িত করে। একইভাবে আপনি <linearGradient> ট্যাগ ব্যবহার করে 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>

  1. HTML5 SVG-এ আয়তক্ষেত্র কীভাবে আঁকবেন?

  2. HTML5 Canvas-এ SVG ফাইল কীভাবে আঁকবেন?

  3. HTML5-এ SVG লোগো কীভাবে আঁকবেন?

  4. HTML5-এ SVG ইমেজ ব্যবহারের পদ্ধতি