ساخت گرادینت‌ شعاعی با عنصر radialGradient در SVG

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

اگر با نحوه ساخت گرادینت خطی در SVG آشنا باشیم، درک عملکرد گرادینت شعاعی بسیار ساده خواهد بود.

گرادینت شعاعی

در گرادینت شعاعی رنگ‌ها بصورت دایره‌ای تغییر می‌کنند، برخلاف گرادینت خطی که رنگ‌ها در امتداد یک خط تغییر دارند.

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

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

<svg width="100%" height="200">
  <defs>
    <radialGradient id="radial" fx="50%" fy="50%" cx="50%" cy="50%" r="75%">
      <stop offset="0%"   stop-color="#05a"/>
      <stop offset="100%" stop-color="#0a5"/>
    </radialGradient>
  </defs>
  
  <rect width="100%" height="100%" fill="url(#radial)"></rect>
</svg>  

خروجی:

 

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

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

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

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

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

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

 

ویژگی‌های گرادینت شعاعی

r

ویژگی r اندازه شعاع یک گرادینت را مشخص می‌کند.

در مثال بالا با تغییر مقدار شعاع از 75% به 25% بصورت زیر:

<radialGradient id="radial1" r="25%">
  <stop offset="0%"   stop-color="#05a"/>
  <stop offset="100%" stop-color="#0a5"/>
</radialGradient>

خروجی پایین را خواهیم داشت:

cx, cy

این دو ویژگی مرکز دایره گرادینت را مشخص می‌کنند و با تغییر آنها می‌توان کل گرادینت را جابجا کرد. cx و cy بصورت درصدی نسبت به عرض و ارتفاع شکلی که قرار است گرادینت بر روی آن اعمال شود، مشخص می‌شوند و مقدار پیشفرض آنها 50% می‌باشد.

در مثال بالا شعاع را به مقدار 50% می‌رسانیم و سپس اندازه cx را از مقدار پیشفرض 50% به مقدار 20% تغییر می‌دهیم:

<radialGradient id="radial2" cx="20%" fx="50%" r="50%">
  <stop offset="0%"   stop-color="#05a"/>
  <stop offset="100%" stop-color="#0a5"/>
</radialGradient>

همانطور که مشاهده می‌کنیم مرکز گرادینت به سمت چپ حرکت کرد، یعنی به فاصله 20 درصدی از لبه سمت چپ مستطیل رسید، با این وجود مقدار رنگ آبی همچنان یکسان است.

در مثال بالا همانطور که مشاهده می‌کنید کانون گرادینت یعنی جایی که رنگ آبی تمرکز کامل را دارد همچنان در مرکز (فاصله 50 درصدی) مستطیل می‌باشد، با این مقدمه ویژگی بعدی را بررسی می‌کنیم:

fx, fy

این دو ویژگی مرکز کانونی گرادینت را مشخص می‌کنند و با تغییر آنها می‌توان نقطه‌ای از گرادینت که با اولین color-stop پر شده است را جابجا کرد. fx و fy بصورت درصدی نسبت به عرض و ارتفاع شکلی که قرار است گرادینت بر روی آن اعمال شود، مشخص می‌شوند و مقدار پیشفرض آنها 50% می‌باشد.

حال مقادیر شعاع و cx را به 50% برمیگردانیم و مقدار fx را بر روی 20% تنظیم می‌کنیم:

<radialGradient id="radial3" fx="20%" r="50%">
  <stop offset="0%"   stop-color="#05a"/>
  <stop offset="100%" stop-color="#0a5"/>
</radialGradient>

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

مثال‌های بالا فقط جهت x را بررسی کردند اما همه این تفاسیر برای جهت y نیز برقرار هستند.

id

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

href

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

gradientUnits

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

userSpaceOnUse: مقادیر گرادینت در سیستم مختصات بصورت مطلق محاسبه می‌شوند، یعنی cx, cy, fx, fy بر اساس سیستم مختصات فعلی محاسبه می‌شوند.

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

gradientTransform

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

spreadMethod

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

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

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

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

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

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

دمو

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

See the Pen
radialGradient by Mojtaba Seyedi (@seyedi)
on CodePen.

همچنین دموی زیر را بررسی کنید:

See the Pen
Icons with Various SVG Radial Gradients by Mojtaba Seyedi (@seyedi)
on CodePen.

و در دموی آخر گرادینت شعاعی را بر روی یک متن اعمال می‌کنیم:

See the Pen
radialGradient for text in SVG by Mojtaba Seyedi (@seyedi)
on CodePen.