سبد (0)

شیب رنگ خطی در SVG

آموزش شیب رنگ در SVG

یک شیب رنگ درواقع تبدیل ملایم یک رنگ به رنگ دیگر است. به علاوه ی آن، می توان چندین تبدیل را به یک عنصر اعمال نمود. 

دو نوع شیب رنگ اصلی در SVG وجود دارند:

  • Linear یا خطی
  • Radial یا شعاعی

 <linearGradient> یا شیب رنگ خطی

از عنصر <linearGradient> برای تعریف یک شیب رنگ خطی استفاده می شود. 

عنصر <linearGradient> باید در داخل یک تگ <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>
خودتان امتحان کنید »

توضیح کد بالا:

  • خصوصیت id که در تگ <linearGradient> قرار دارد، یک نام یکتا را برای شیب رنگ مورد نظر، مشخص می کند. 
  • خصوصیات x1 و x2 و y1 و y2 که در تگ <linearGradient> قرار دارند، موقعیت شروع و پایان شیب رنگ را مشخص می کنند. 
  • شیب رنگ مورد نظر می تواند شامل چندین رنگ باشد. هر رنگ به وسیله ی یک تگ <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,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(#grad2)" />
</svg>
خودتان امتحان کنید »

مثال 3

تعریف یک بیضی به همراه یک شیب رنگ افقی خطی، از رنگ زرد به رنگ قرمز  و اضافه کردن متن در درون بیضی مورد نظر:

 

کد 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> برای اضافه کردن یک متن استفاده می شود. 
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان