SVG লীনিয়ার গ্রেডিয়েন্ট

SVG 渐变必须在 标签中进行定义。

SVG 渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。

SVG-এ, দুই প্রধান অনুমান ধরন রয়েছে:

  • সরাসরি অনুমান
  • রেডিওগ্রাফিক অনুমান

সরাসরি অনুমান

<linearGradient> ট্যাগটি SVG-এর সরাসরি অনুমান নির্দিষ্ট করতে ব্যবহৃত হয়

<linearGradient> ট্যাগটি <defs> ইন্টার্নালে অনুস্থাপিত হতে হবে。<defs> ট্যাগটি definitions এর সংক্ষিপ্ত রূপ, যা অনুমানের মতো বিশেষ ইলিমেন্টগুলির জন্য নির্দিষ্ট করা হয়

সরাসরি অনুমানকে ভিক্ত্রীয়, ভিক্ত্রীয় বা কোণচাকার অনুমান হিসাবে নির্দিষ্ট করা যায়:

  • যখন y1 ও y2 সমান এবং x1 ও x2 ভিন্ন, তখন অনুমান তৈরি করা যায়
  • যখন x1 ও x2 সমান এবং y1 ও y2 ভিন্ন, তখন ভিক্ত্রীয় অনুমান তৈরি করা যায়
  • যখন x1 ও x2 ভিন্ন এবং y1 ও y2 ভিন্ন, তখন কোণচাকার অনুমান তৈরি করা যায়

নিচের কোডটি টেক্সট এডিটরে কপি করুন এবং ফাইলটিকে "linear1.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>
<linearGradient id="orange_red" 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>
<ellipse cx="200" cy="190" rx="85" ry="55">
style="fill:url(#orange_red)"/>
</svg>

কোড বিবরণ:

  • <linearGradient> ট্যাগের id প্রতিশত অবস্থান অনুমানকে একটি অভিন্ন নাম দেয়
  • fill:url(#orange_red) প্রতিশত অবস্থান ellipse ইলিমেন্টকে এই অনুমানের সাথে সংযুক্ত করে
  • <linearGradient> ট্যাগের x1, x2, y1, y2 প্রতিশত অবস্থান অনুমানের ভাব ও শেষ অবস্থান নির্দিষ্ট করে
  • অনুমানের রঙ পরিধি দুই বা বেশি রঙ দ্বারা গঠিত হতে পারে। প্রত্যেক রঙকে একটি <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>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<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>
<ellipse cx="200" cy="190" rx="85" ry="55">
style="fill:url(#orange_red)"/>
</svg>

উদাহরণ দেখুন (ভবন্তরীয় গ্রেডিয়েন্ট)