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

SVG 渐变

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

SVG 中有两种主要的渐变类型：

  • 线性渐变
  • 放射渐变

SVG 线性渐变 -

元素用于定义线性渐变。

元素必须嵌套在 <defs> 标记内。<defs> 元素是定义（definitions）的缩写，包含对特殊元素（比如滤镜）的定义。

线性渐变可以定义为水平、垂直或角度渐变：

  • যখন y1 এবং y2 সমান এবং x1 এবং x2 ভিন্ন তখন হলব গ্রেডিয়েন্ট তৈরি করুন
  • যখন x1 এবং x2 সমান এবং y1 এবং y2 ভিন্ন তখন ভিক্টরিক্যাল গ্রেডিয়েন্ট তৈরি করুন
  • যখন x1 এবং x2 ভিন্ন এবং y1 এবং y2 সমান নয় তখন কোণ গ্রেডিয়েন্ট তৈরি করুন

উদাহরণ 1

একটি সফট এলিপ্স নির্বাচন করুন যা সবুজ থেকে লাল পর্যন্ত হলব হলব লাইনার গ্রেডিয়েন্ট হবে:

এটি SVG 代码:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" 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="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

আপনার হাতে প্রয়াস করুন

কোড ব্যাখ্যা:

  • <linearGradient> ট্যাগের id প্রতিশব্দটি গ্রেডিয়েন্টের অভিন্ন নাম নির্ধারণ করে
  • <linearGradient> ট্যাগের x1, x2, y1, y2 প্রতিশব্দটি গ্রেডিয়েন্টের ভাব এবং শেষ অবস্থান নির্ধারণ করে
  • গ্রেডিয়েন্ট রঙের পরিধি দুই বা এর অধিক রঙ দ্বারা গঠিত হতে পারে। প্রত্যেক রঙকে <stop> ট্যাগ দ্বারা নির্ধারণ করা হয়
  • offset প্রতিশব্দটি গ্রেডিয়েন্ট রঙের ভাব এবং শেষ অবস্থান নির্ধারণ করে
  • fill প্রতিশব্দটি অবকেশ ইলেকট্রনমসের সাথে গ্রেডিয়েন্টকে যুক্ত করে

উদাহরণ 2

একটি অবকেশ নির্ধারণ করুন যা সবুজ থেকে লাল হওয়ার ভিক্টরিয়াল লাইনার গ্রেডিয়েন্ট নিয়ে আছে:

এটি SVG 代码:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

আপনার হাতে প্রয়াস করুন

উদাহরণ 3

একটি অবকেশ নির্ধারণ করুন এবং তার ভিতরে টেক্সট যুক্ত করুন, যা সবুজ থেকে লাল হওয়ার হলেনীয়া লাইনার গ্রেডিয়েন্ট নিয়ে আছে:

SVG

এটি SVG 代码:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" 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="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

আপনার হাতে প্রয়াস করুন

কোড ব্যাখ্যা:

  • <text> ইলিমেন্ট টেক্সট যোগ করতে ব্যবহৃত হয়