بروز رسانی اسفند ۱۰ام, ۱۳۹۹ ۶:۳۴ بعد از ظهر
بهمن ۰۹, ۱۳۹۹ admin آموزش پیشرفته css, آموزش مقدماتی css 0
همانطور که در سیاساس گرادینت داریم، در 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 مستطیل مورد نظر دادیم.
همانطور که در مباحث و مطالب CSS خواندهایم، در گرادینتها به مجموع رنگ و همچنین مکانی که جهت آن هم مشخص کردن می می شود color-stop می نامند. همچنین color-stop جایی می باشد که در آن هم نقطه، رنگ بصورت کامل و همچنین خالص می باشد و همچنین هنوز شروع به محو شدن نکرده می باشد.
در SVG جهت مشخص کردن color-stopها از یک عنصر مجزا به نام <stop>
بهره بری و استفاده میمی شود که آن عنصر ویژگیهای زیر را دارد:
مثل گرادینتها در سیاساس، اینجا نیز محدودیتی در تعداد stopها وجود ندارد.
ویژگی r
مقدار و اندازه شعاع یک گرادینت را مشخص میکند.
در مثال بالا با تغییر مقدار شعاع از ۷۵% به ۲۵% بصورت زیر:
<radialGradient id="radial1" r="25%">
<stop offset="0%" stop-color="#05a"/>
<stop offset="100%" stop-color="#0a5"/>
</radialGradient>
خروجی پایین را خواهیم داشت:
آن دو ویژگی مرکز دایره گرادینت را مشخص میکنند و همچنین با تغییر آنها میقدرت کل گرادینت را جابجا کرد. 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>
همانطور که دیدن میکنیم مرکز گرادینت به سمت چپ حرکت کرد، یعنی به فاصله ۲۰ درصدی از لبه سمت چپ مستطیل رسید، با آن وجود مقدار رنگ آبی همچنان یکسان می باشد.
در مثال بالا همانطور که دیدن میکنید کانون گرادینت یعنی جایی که رنگ آبی تمرکز کامل را دارد همچنان در مرکز (فاصله ۵۰ درصدی) مستطیل میباشد، با آن مقدمه ویژگی بعدی را بررسی کردن میکنیم:
آن دو ویژگی مرکز کانونی گرادینت را مشخص میکنند و همچنین با تغییر آنها میقدرت نقطهای از گرادینت که با اولین 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
میقدرت به آن گرادینت رفت و آمد و مراجعه کرد و همچنین از آن هم بهره بری و استفاده کرد.
با بهره بری و استفاده از آن ویژگی میقدرت به گرادینتی دیگر اشاره کرد و همچنین ویژگیهای آن هم گرادینت را به ارث برد، البته میقدرت ویژگیهای مورد مستلزم و نیاز را دوباره نویسی کرد. جهت بررسی کردن یک مثال میتوانید به مطلب مرتبط به گرادینت خطی رفت و آمد و مراجعه کنید.
آن ویژگی با بهره بری و استفاده از دو مقدار زیر سیستم مختصات را جهت x1, x2, y1, y2 تعریف میکند. به گفتن دیگر، مشخص میکند که جهت انجام محسبات مقادیر ویژگیهای x1, x2, y1, y2 آیا بایستی و حتما از viewbox بهره بری و استفاده می شود یا عنصری که گرادینت بر روی آن هم اعمال خواهد شد.
userSpaceOnUse: مقادیر گرادینت در سیستم مختصات بصورت مطلق محاسبه میشوند، یعنی cx, cy, fx, fy بر اساس سیستم مختصات فعلی محاسبه میشوند.
objectBoundingBox: مقدار پیشفرض می باشد و همچنین باعث میمی شود مقادیر cx, cy, fx, fy بر اساس سیستم مختصات عنصری که از گرادینت بهره بری و استفاده میکند، محاسبه شوند. به گفتن دیگر مختصات گرادینت بر اساس عنصر مربوطه میباشد و همچنین آن باعث میمی شود، گرادینت بر اساس عنصری که از آن هم بهره بری و استفاده میکند تغییر مقدار و اندازه بدهد.
با بهره بری و استفاده از ویژگی gradientTransform
میقدرت دگرگونیهای متنوع و گوناگون و مختلف مثل چرخش و همچنین غیره را بر روی گرادینت اعمال کرد، جهت اطلاع اکثرا و بیشتر از توابع مورد نظر به مطلب transform رفت و آمد و مراجعه کنید.
زمانی که نقطه شروع یا پایان گرادینت به جای آنکه ۰ و همچنین ۱۰۰ قسمت و بخش باشند داخل شکل هدف خواهند بود با بهره بری و استفاده از ویژگی 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.
اسفند ۱۰, ۱۳۹۹ 0
بهمن ۲۵, ۱۳۹۹ 0
بهمن ۰۱, ۱۳۹۹ 0
دی ۲۶, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0