شیب رنگ خطی در 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 مورد نظر قرار دارد:

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

• خصوصیت id که در تگ <linearGradient> قرار دارد، یک نام یکتا را برای شیب رنگ مورد نظر، مشخص می کند. 
• خصوصیات x1 و x2 و y1 و y2 که در تگ <linearGradient> قرار دارند، موقعیت شروع و پایان شیب رنگ را مشخص می کنند. 
• شیب رنگ مورد نظر می تواند شامل چندین رنگ باشد. هر رنگ به وسیله ی یک تگ <stop> مشخص می شود. از خصوصیت offset، برای تعریف اینکه شیب رنگ از کجا شروع شده و در کجا تمام شود، استفاده می شود. 
• از خصوصیت fill برای اتصال بیضی به شیب رنگ مورد نظر، استفاده می شود. 

مثال 2

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

در زیر، کد SVG مورد نظر قرار دارد:

مثال 3

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

کد SVG در زیر قرار دارد:

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

• از عنصر <text> برای اضافه کردن یک متن استفاده می شود. 

• بعدی