svg

به این کلیپ نگاه کنید یک svg می خواهم در این کلیپ نشان دهم. این مقاله به علت روز گرافیست کارا مینویسم که یک برنامه نویس می تواند یک گرافیست کار باشد ولی این مقاله به صورت کلیپ و کد نویسی نشان دهم.شرمنده خیلی علاقه داشتم میکروفن داشته باشم کدش توضیح بدم ولی به صورت کلیپ نشون میدهم. https://aparat.com/v/4KYn2 حالا توضیحات که 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-squareroundاین یعنی که به صورت نیم دایره باشد buttاین یعنی تقریبا مربع باشد square کلا حالتی که به خط ها بدهیم کاملا مربع باشد برای مطالعه بیشتر به این لینک رجوع کنید.https://www.geeksforgeeks.org/css-stroke-linecap-property/stroke-linejoinhttps://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoinThe 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-dasharrayhttps://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharrayThe stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape;صفتی است که استفاده اش توضیح و ارائه اش می دهیم ، صفاتی که توضیح می دهیم پترن های که از خط ها وشکاف های که در نقاشی استفاده می کنیم و در طرح کلی شکل نشان می دهیم که در این حالت 440 دادم که هرچی عدد بیشتری دهیم یعنی نشان نده و هرچه عدد کمتری بدهیم اون نشان میدهیم . stroke-dashoffsetThe 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