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

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

در مثال زیر از سه توقف بهره بری و استفاده می‌کنیم، توقف دوم را با عدد ۵۰ قسمت و بخش در وسط گرادینت مشخص کردن کرده و همچنین همچنین با بهره بری و استفاده از 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 جهت چرخش ۴۵ درجه‌ای گرادینت بهره بری و استفاده شده می باشد:

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

spreadMethod

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

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

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

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

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

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

دمو

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

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

درک بهتر <stop>

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

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

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