همانطور که در سی‌اس‌اس گرادینت داریم، در 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 را مشخص می‌کند و همچنین از %۰ تا %۱۰۰ مقدار می‌پذیرد، همچنین می‌قدرت مقادیرش را بین ۰ تا ۱ مشخص کردن کرد، که ۰ در گرادینت شعاعی آن هم نقطه (fx,fy) و همچنین ۱ بیرونی‌ترین دایره می‌باشد.
• stop-color: رنگ مطلوب در نقطه توقف را مشخص می‌کند.
• stop-opacity: مقدار شفافیت یا آن هم opacity رنگ را مشخص می‌کند که می‌قدرت مقدار بین ۰ تا ۱ و همچنین یا بین %۰ تا %۱۰۰ داشته باشد.

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

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

r

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

در مثال بالا با تغییر مقدار شعاع از ۷۵% به ۲۵% بصورت زیر:

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

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

cx, cy

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

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

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

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

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

fx, fy

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

حال مقادیر شعاع و همچنین cx را به ۵۰% برمیگردانیم و همچنین مقدار fx را بر روی ۲۰% تنظیم می‌کنیم:

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

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

مثال‌های بالا تنها و فقط جهت 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

زمانی که نقطه شروع یا پایان گرادینت به جای آنکه ۰ و همچنین ۱۰۰ قسمت و بخش باشند داخل شکل هدف خواهند بود با بهره بری و استفاده از ویژگی 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.