SVG রেডিয়াল গ্রেডিয়েন্ট
- পূর্ববর্তী পৃষ্ঠা SVG লাইনার গ্রেডিয়েন্ট
- পরবর্তী পৃষ্ঠা SVG উদাহরণ
SVG গ্রেডিয়েন্টটি <defs> ট্যাগের মধ্যে নির্দিষ্ট করতে হবে
রেডিয়াল গ্রেডিয়েন্ট
<radialGradient> ট্যাগটি রেডিয়াল গ্রেডিয়েন্ট নির্দিষ্ট করে
<radialGradient> ট্যাগটি <defs> এর মধ্যে অন্তর্ভুক্ত হতে হবে। <defs> ট্যাগটি definitions-এর সংক্ষিপ্ত রূপ, যা গম্ভীরতা মতো বিশেষ ইলেকট্রনেটকে নির্দিষ্ট করতে অনুমতি দেয়
নিচের কোডটি কপি করুন, এবং ফাইলটিকে "radial1.svg" নামে সংরক্ষণ করুন। এই ফাইলটিকে আপনার web ডিরেক্টরিতে রাখুন:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="grey_blue" 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="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/> </svg>
কোড বিবরণ:
<radialGradient> ট্যাগের id প্রতিভা গম্ভীরতা একটি অভিন্ন নাম নির্দিষ্ট করতে পারে, fill:url(#grey_blue) প্রতিভা এই গম্ভীরতা সঙ্গে ellipse ইলেকট্রনেটকে সংযুক্ত করে, cx, cy এবং r প্রতিভা বাহ্যিক গ্রেডিয়েন্টকে নির্দিষ্ট করে, fx এবং fy অভ্যন্তরীণ গ্রেডিয়েন্টকে নির্দিষ্ট করে শুদ্ধ রঙের পরিবর্তন দুই বা আরও বেশি রঙ দ্বারা গঠিত হতে পারে। প্রত্যেক রঙকে একটি <stop> ট্যাগের মাধ্যমে নির্দিষ্ট করা হয়। offset প্রতিভা গম্ভীরতা নির্দিষ্ট করে যে কোনও গম্ভীরতা যেখানে গম্ভীরতা শুরু এবং শেষ হবেআরেকটি উদাহরণ:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="grey_blue" cx="20%" cy="40%" 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="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/> </svg>
- পূর্ববর্তী পৃষ্ঠা SVG লাইনার গ্রেডিয়েন্ট
- পরবর্তী পৃষ্ঠা SVG উদাহরণ