svg

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

حالا توضیحات که svg ساده را چطور طراحی کنید

من در این نمونه کار دو تا کار svg داشتم یکی دایره و یکی دکمه

اول میپردازم به دایره که چطور بکشیمش

در بخش html یک div داریم با کلاس و svg با یک کلاس ولی circle سه تا مشخصه داره cx,cy ,r این سه تا در یک شکل نشون میدهم .

در این عکس cx, cy مانند یک محور مختصات بدانیم که cx مثلا 250 وcy مساوی 50 وr که شعاع دایره 50 می باشد . پس مفهوم cx ,cy متوجه شدیم بریم سراغ css و بعد جاوااسکریپت که چطور بهش حالت بدهیم.

من همه حالت های mixin در scss پاک کردم که ببنید برای طراحی ظاهری چه چیزی نوشتم اولی که میگه اون خط اخر که colorBlack$ که به طور varible نشون دادم 000# که یک جا تو base.scss نوشتمش اینجا استفاده کردم ودر اخر همین کدم به css تبدیل میشه

چرا در این پروژه از scss استفاده کردم وچرا با html css js فقط استفاده نکردم

از کد نویسی تکراری پرهیز می کنم و چیزهای که در کدم نیاز دارم و در یک جا ذخیره کنم و هر موقع نیاز شد از اونا استفاده کنم مانند این شکل

من اول اومدم همه رنگ هام به طور varible نوشتم و کلا چیزهایی که نوشتم و نیاز دارم وتاحد امکان از کدنویسی تکراری جلوگیری کنم با mixin نشان دادم.

بپردازم به بقیه دایره که چطور بکشیمش

یک @keyframes نوشتم که این مبحث مربوط به css animation می باشد.اسمش گذاشتم rotate که در 0 درصد ولی در حالت اولیه 0 باشد و در حالت دوم که 100% 360 درجه بچرخد که اونم در animation معرفی کردم به کلاس loader, loader circle در حالت اول گفتم عرض و ارتفاع 100% باشد

what fill?

به این شکل بالا وشکل پایین نگاه کنید fill اون خطی که cx ,cy ,r میکشد

که در اینجاfill مشکی دادم که توی خود دایره رنگ مشکی دارد

what stroke?

اون رنگ ابی کمرنگ که میچرخد و به این stroke حالت های مختلف دادم مانند width که عرضش چقدر باشد به این شکل ها نگاه کنید که حالت های stroke نشان دادم .

stroke-linecap

The stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked

و ترجمه همین که درسایت mdn است.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

یک صفتی هست که نمایش می دهد و یک صفتی هست که توضیح می دهد یک شکلی که تمام کردن تا باز کردن قطعی چطور استفاده کنیم موقعی که دارند stroke استفاده کنیم چه در محور مختصات و شعاع آن است.

این stroke-linecap چندین حالت داره ؟

round-butt-square

round

این یعنی که به صورت نیم دایره باشد

butt

این یعنی تقریبا مربع باشد

square

کلا حالتی که به خط ها بدهیم کاملا مربع باشد برای مطالعه بیشتر به این لینک رجوع کنید.

https://www.geeksforgeeks.org/css-stroke-linecap-property/

stroke-linejoin

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

The stroke-linejoin attribute is a presentation attribute defining the shape to be used at the corners of paths when they are stroked.

صفتی است که یک شکلی استفاده کنیم توضیح میدهد در زاویه های که که انها مواقعی هستند که در path ,stroke نشان میدهیم که برای توضیحات بیشتر به اون لینک رجوع کنید.

stroke-dasharray

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape;

صفتی است که استفاده اش توضیح و ارائه اش می دهیم ، صفاتی که توضیح می دهیم پترن های که از خط ها وشکاف های که در نقاشی استفاده می کنیم و در طرح کلی شکل نشان می دهیم که در این حالت 440 دادم که هرچی عدد بیشتری دهیم یعنی نشان نده و هرچه عدد کمتری بدهیم اون نشان میدهیم .

stroke-dashoffset

The stroke-dashoffset attribute is a presentation attribute defining an offset on the rendering of the associated dash array.

صفتی است که توضیح و ارائه می دهد در افست هایی که نمایش می دهیم و در خط و ارایه های که بهش وابسته هستیم که اینم هر چی عددش بیشتر باشه نشان نمیده که من به این keyframes دادم که در حالت 0و 50و 50.1 و100 درصد چطور باشد.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

جاوااسکریپت

if(location.pathname==="/") {
setTimeout(function () {
window.location.href = "signIn.html"
}, 2000)
}

لوکشین که دارم در pathname گذاشتم که "/" مساوی بود یک set time out داشته باشه و گفته بعد از loader نشان دادی بعد از 2000 ثانیه برو به صفحه ی signin برو و اگر خط اول نمی گذاشتم و من صفحه html دیگه داشتم دوباره برمیگشت به صفحه قبل ومن این گذاشتم به صفحه برنگردد البته میتونستم واسه هر صفحه یک جاوااسکریپت جدا بگذارم ولی این واسه ی من منطقی تر بود.

دکمه

https://www.aparat.com/v/UTF3v

<section>
<div class="rotation" >
<a class="Login" href="website.html">
<svg class="svg-Rect">
<rect class="Rect"></rect>
</svg>
ثبت نام
</a>
</div>
</section>

@mixin SizeSvg($top,$left){
position: absolute;
top: $top;
left: $left;
}

سورس نمونه کارم در این ادرس گیت هاب می باشد.

https://github.com/pooriavakili/websiteporfolioone