محمدرضا کیکاوسی

ساخت چند ضلعی ها در وب با استفاده از svg

۱ آبان ۱۳۹۶ نوشته ها

ساخت چند ضلعی ها در وب با استفاده از svg

چند ضلعی ها در صفحات وب و یا اشکال اُریب در بخش های مختلف وب سایت، یکی از ترندهاییه که طرفداران زیادی هم داره. خیلی از افراد طراحی های شبیه به هم رو دوست ندارن و دنبال یه طرح تازه توی صفحه هستند. خطوط موربی که بتونن ساختار صفحه را بکشنن و تجربه ای متفاوت از اون چه که همیشه کابر دیده ایجاد بشه.
مثلا طرح های زیر رو ببینید:

 

چند ضلعی در وب

 

 

چند ضلعی در وب

 

خطوط مورب و شکل های چند ضلعی که توی این نمونه طرح ها وجود دارن، با استفاده از svg قابل پیاده سازی هستند. گرچه با تکنیک های css و transform skew در Css هم میشه اشکال مورب ایجاد کرد اما با استفاده از SVG شاید راحت تر باشید. زمانی که خودم نیاز به استفاده از این تکنیک داشتم، وقت زیادی از من گرفته شد. چون مرجعی مناسبی براش وجود نداشت و هر مرورگر ساز خودش رو میزد! با وجود سادگی کار اطلاعات ناقص تو این زمینه زیاده و ممکنه با چند بار نتیجه نگرفتن کلا قید این روش رو بزنید. اما اگر دقیقا روش کار رو یاد بگیرید استفاده ازش خیلی حرفه ای و جذاب میشه.به خاطر همین سعی کردم به صورت مختصر و مفید خلاصه این موارد رو جمع آوری کنم تا توی وقت شما صرفه جویی بشه.

اول از همه یکی از سایت های خوبی که توی اون می تونید هر نوع چند ضلعی که میخواید بسازید و ازش خروجی svg بگیرید cssplant هست. توی این سایت میتونید هر نوع شکلی که نیاز دارید به سادگی بکشید و به صورت هم زمان خروجی svg اون رو هم ببینید.

چند ضلعی در وب

بعد از رسم شکل مورد نظرتون، دو نوع کد به شما نمایش داده میشه. یکی css code و اون یکی inline svg هستش. در حقیقت شما با استفاده از svg tag و همچنین css polygon شکل مورد نظرتون رو می سازید و باید به صورت همزمان هر دو رو در صفحه تون استفاده کنید. نکته مهم اینجاست که سازگاری مرورگر تو این زمینه خیلی مهمه و باید همه vendor prefix ها رو رعایت کنید.

اگر شما کد تولیدی این وب سایت رو توی صفحتون استفاده کنید به احتمال خیلی زیاد اون کد اجرا نمیشه! شما باید چند تا کار دیگه توی اون کد انجام بدید تا بتونید خروجی مورد نظرتون رو ببینید.

حالا قدم به قدم کار رو پیش میبریم.

ابتدا یه div ساده بسازید و کلاسی مثل poly بهش بدید:

 



<div class="poly"></div>

 

 

کد زیر رو هم توی صفحه html تون قرار بدید.با توجه به اینکه عرض و ارتفاعش رو صفر دادید، قراردادنش هر جایی از صفحه فضایی رو اشغال نمی کنه. میتونید کد رو پایین ترین بخش سایت بنویسید.

 


<svg width="0" height="0">
<defs>
<clipPath id="polygon3" clipPathUnits="objectBoundingBox">

<polygon points="0 0, 0.69 0, ۱ ۰٫۵۵, ۰ ۰٫۵۴">
</polygon>
</clipPath>
</defs>
</svg>

 

این کد بهینه شده کد تولید شده وب سایت هست. نکته اینجا بودکه شما باید تگ های def  و attribute clippathunit رو که در اون کد وجود نداشت، بهش اضافه کنید.

مسئله بعدی اعدادیه که به صورت پیکسلی در کد سایت وجود داشت و حالا در تگ polygon و ویژگی points داخل این تگ، اعداد به صورت درصدی نوشته شدند و باعث میشه بتونید چند ضلعی ریسپانسیو داخل صفحه داشته باشید. اعداد صدمی مثل ۰٫۶۹ دراینجا در حقیقت ۶۹% هستند.

حالا باید کد css رو اضافه کنید.


.poly{

 

clip-path: polygon(0 0, 69% 0, 100% 55%, 0 54%);
clip-path: url(“#clipPolygon”);

 

 

/*style it*/
with:100%;
height:500px;
background-color:#333;
 }

 

 

اولین خط مربوط به پشتیبانی مرورگر سافاری و کروم و دومین خط مربوط به پشتیبانی مرورگر فایرفاکس هست. در حقیقت تگ svg که داخل html نوشتیم، برای پشتیبانی مرورگر فایرفاکس ایجاد شد و اگر اون تگ رو بردارید و تنها خط اول css رو داشته باشید، به راحتی چند ضلعی مورد نظر ساخته میشه با این تفاوت که فقط در مرورگر کروم و سافاری قابل اجراست.

همون طور که می بینید، داخل کد مربوط به فایرفاکس (خط دوم) یک url خواسته شده و آی دی #clipPolygon در اون داده شده که در حقیقت آی دی تگ polygon svg در صفحه هست. نکته مهم مسیردهی درست این url هست. داخل url دقیقا مسیر صفحه ای رو بدید که تگ svg تون قرار داره.. و اگر دادن مسیر براتون مشکله و ممکنه اشتباه کنید، به راحتی، این دو خط css رو به همون شکل داخل تگ head همون صفحه بنویسید تا درصد اشتباهتون کم بشه. در واقع با این کار به کد css می گید آی دی clipPolygon ای رو بخون که داحل همین صفحه html هست. به صورت کلی نوشتن این کد داخل تگ head بهترین راهه.
اگر همه مسیر گفته شده رو پیش برید، در نهایت یک چهارضلعی اریب در صفحه تون دارید.با همین روش هر نوع شکل دیگه ای رو میتونید بسازید و به طرح هاتون شکل تازه ای بدید.
 شاد باشید و پر انرژی 🙂

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *