ساخت گرادینت‌ خطی با عنصر linearGradient در SVG

در SVG سه روش برای رنگ یا پرکردن داخل و حاشیه ترسیمات و متون وجود دارد، که روش اول استفاده از رنگ می‌باشد، روش دوم استفاده از الگوها است و روش سوم را در این مطلب که گرادینت ها هستند بررسی خواهیم کرد.

همانطور که در سی‌اس‌اس گرادینت داریم، در SVG نیز این امکان وجود دارد که گرادینت‌های خطی و شعاعی داشته باشیم.

گرادینت خطی

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

در مثال زیر قصد داریم که درون یک مستطیل را با یک گرادینت خطی که از صورتی به آبی آسمانی تغییر می‌کند، پر کنیم.

<svg width="100%" height="200">
  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="pink"/>
      <stop offset="100%" stop-color="skyblue"/>
    </linearGradient>
  </defs>
  
  <rect width="100%" height="100%" fill="url(#linear)"></rect>
</svg>  

خروجی:

 

همانطور که دیدیم گرادینت را ساختیم و بوسیله یک id آدرس آن را به ویژگی fill مستطیل مورد نظر دادیم.

عنصر stop و ویژگی‌های آن

همانطور که در مطالب CSS خوانده‌ایم، در گرادینت‌ها به مجموع رنگ و مکانی که برای آن تعیین می شود color-stop می گویند. همچنین color-stop جایی است که در آن نقطه، رنگ بصورت کامل و خالص است و هنوز شروع به محو شدن نکرده است.

در SVG برای مشخص کردن color-stopها از یک عنصر مجزا به نام <stop> استفاده می‌شود که این عنصر ویژگی‌های زیر را دارد:

• offset: مکان یک color-stop را مشخص می‌کند و از %0 تا %100 مقدار می‌پذیرد، همچنین می‌توان مقادیرش را بین 0 تا 1 تعیین کرد، که 0 لبه سمت چپ و 1 لبه سمت راست می‌باشد.
• stop-color: رنگ مطلوب در نقطه توقف را مشخص می‌کند.
• stop-opacity: مقدار شفافیت یا همان opacity رنگ را مشخص می‌کند که می‌توان مقدار بین 0 تا 1 و یا بین %0 تا %100 داشته باشد.

همانند گرادینت‌ها در سی‌اس‌اس، اینجا نیز محدودیتی در تعداد stopها وجود ندارد.

در مثال زیر از سه توقف استفاده می‌کنیم، توقف دوم را با عدد 50 درصد در وسط گرادینت تعیین کرده و همچنین با استفاده از stop-opacity شفافیت رنگ را نصف می‌کنیم:

<svg>
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#e43"/>
      <stop offset="50%"  stop-color="green" stop-opacity="0.5" />
      <stop offset="100%" stop-color="#34e"/>      
    </linearGradient>
  </defs>
  
  <rect width="100%" height="100%" fill="url(#gradient)"></rect>
</svg>

خروجی:

 

ویژگی‌های گرادینت خطی

x1, x2, y1, y2

این ویژگی‌ها نقاط شروع و پایان گرادینت را مشخص می‌کنند. همچنین عملا به وسیله مقدار دهی به این نقاط میتوان جهت گرادینت را نیز مشخص کرد. تصویر زیر به درک کارایی این نقاط کمک می‌کند.

id

از طریق ویژگی id می‌توان به این گرادینت مراجعه کرد و از آن استفاده کرد.

href

با استفاده از این ویژگی می‌توان به گرادینتی دیگر اشاره کرد و ویژگی‌های آن گرادینت را به ارث برد، البته می‌توان ویژگی‌های مورد نیاز را دوباره نویسی کرد.

به عنوان نمونه در کد زیر مشاهده می‌کنیم که عنصر <linearGradient> دوم با استفاده از id گرادینت اول تمام ویژگی‌های آن گرادینت را به ارث می‌برد و ویژگی‌های x و y را برای خود تغییر می‌دهد:

<svg width="100%" height="420">
 <defs>
   <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0">
     <stop offset="0%"   stop-color="#F6D242" />
     <stop offset="100%" stop-color="#FF52E5" />
   </linearGradient>
   
   <linearGradient href="#gradient1" id="gradient2" x2="0" y2="100%"></linearGradient>   
 </defs>

 <rect x="0" y="0" width="100%" height="200" fill="url(#gradient1)" />
 <rect x="0" y="220" width="100%" height="200" fill="url(#gradient2)" />
</svg>

در کد بالا دیده شد که مستطیل دوم از گرادینت دوم استفاده می‌کند، و در خروجی زیر تغییراتی که گرادینت دوم بر روی مشخصات گرادینت اول داده است، قابل مشاهده می‌باشد (تغییر جهت گرادینت از طریق بازنویسی نقطه پایان گرادینت اول):

gradientUnits

این ویژگی با استفاده از دو مقدار زیر سیستم مختصات را برای x1, x2, y1, y2 تعریف می‌کند. به بیان دیگر، مشخص می‌کند که برای انجام محسبات مقادیر ویژگی‌های x1, x2, y1, y2 آیا باید از viewbox استفاده شود یا عنصری که گرادینت بر روی آن اعمال خواهد شد.

userSpaceOnUse: مقادیر گرادینت در سیستم مختصات بصورت مطلق محاسبه می‌شوند، یعنی x1, x2, y1, y2 بر اساس سیستم مختصات فعلی محاسبه می‌شوند.

objectBoundingBox: مقدار پیشفرض است و باعث می‌شود مقادیر x1, x2, y1, y2 بر اساس سیستم مختصات عنصری که از گرادینت استفاده می‌کند، محاسبه شوند. به بیان دیگر مختصات گرادینت بر اساس عنصر مربوطه می‌باشد و این باعث می‌شود، گرادینت بر اساس عنصری که از آن استفاده می‌کند تغییر اندازه بدهد.

gradientTransform

با استفاده از ویژگی gradientTransform می‌توان دگرگونی‌های مختلف مثل چرخش و غیره را بر روی گرادینت اعمال کرد، برای اطلاع بیشتر از توابع مورد نظر به مطلب transform مراجعه کنید.

در مثال زیر از تابع rotate برای چرخش 45 درجه‌ای گرادینت استفاده شده است:

<linearGradient gradientTransform="rotate(45)" id="linear">
  <stop offset="0%"   stop-color="pink"/>
  <stop offset="100%" stop-color="skyblue"/>
</linearGradient>

spreadMethod

زمانی که نقطه شروع یا پایان گرادینت به جای اینکه 0 و 100 درصد باشند داخل شکل هدف هستند با استفاده از ویژگی spreadMethod می‌توان رفتار گرادینت را تعریف کرد.

این ویژگی مقادیر زیر را می‌پذیرد:

pad: مقدار پیشفرض است و باعث می‌شود تا رنگ اول و آخر گرادینت قبل و بعد از گرادینت پخش شوند.

repeat: باعث تکرار گرادینت در سراسر شکل هدف می‌شود.

reflect: گرادینت در سراسر عنصر هدف بصورت آینه‌ای تکرار می‌شود.

تصویر زیر گویای تفاوت این سه مقدار می‌باشد:

دمو

با تغییر در مقادیر دموی زیر می‌توانید درک بهتری از عملکرد گرادینت خطی در SVG داشته باشید:

See the Pen
<linearGradient> by Mojtaba Seyedi (@seyedi)
on CodePen.

درک بهتر <stop>

برای بیان بهتر تفاوت بین ویژگی‌های x و y با عنصر <stop> مثال زیر را باهم بررسی می‌کنیم.

برای ساخت این طرح نیاز داریم که هر تکرار گرادینت، 10 درصد از سطح دایره را پوشش بدهد و همینطور میخواهیم در راستای افق باشد در نتیجه نقاط x و y را بصورت زیر مشخص می‌کنیم:

<svg width="200" height="200" viewBox="0 0 10 10">
  <defs>
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="10%" y2="0%" spreadMethod="repeat">
      <stop offset="50%"  stop-color="black" />
      <stop offset="50%" stop-color="#fff" />
    </linearGradient>
  </defs>

  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" stroke="#ffc107" stroke-width=".1" />
</svg>

حال میخواهیم هر تکرار به دو قسمت سیاه و سفید تبدیل شود، در نتیجه عناصر stop را در نقطه 50 درصد تعیین می‌کنیم.

پس توجه کنید که عنصر stop تعیین کننده نقاط توقف رنگ در هر تکه از گرادینت که اندازه آن توسط ویژگی‌های x و y مشخص شده است، می‌باشد.

گرادینت برای متن

در دموی زیر یک گرادینت خطی برای متن اعمال شده است:

See the Pen
SVG Gradient Filled Text by Mojtaba Seyedi (@seyedi)
on CodePen.