[-]
آخرین ارسالی ها
تفاوت UI و طراحی UX چیست؟
شروع کننده:sitecup آخرین پست توسط:sitecup پاسخ ها:0 نرم افزار کامپیوتر Computer Software نمایش ها:7 زمان:۴-۲۳-۱۳۹۸
چگونه طراحان وب می توانند ارتباط با مشتریان را توسعه دهند
شروع کننده:sitecup آخرین پست توسط:sitecup پاسخ ها:0 متفرقه در مورد کامپیوتر other about computer نمایش ها:8 زمان:۴-۲۳-۱۳۹۸
چگونه در ۱۵ دقیقه یک سایت واکنشگرا طراحی کنیم
شروع کننده:sitecup آخرین پست توسط:sitecup پاسخ ها:0 مقالات آموزشی و کاربردی learning articles نمایش ها:10 زمان:۴-۲۳-۱۳۹۸
بررسی طراحی سایت و رابط کاربری جدید YouTube
شروع کننده:sitecup آخرین پست توسط:sitecup پاسخ ها:0 خدمات Services نمایش ها:24 زمان:۴-۱۶-۱۳۹۸
چگونگی ایجاد فرم های ساده با SVG
شروع کننده:sitecup آخرین پست توسط:sitecup پاسخ ها:0 معرفی سایتها و وبلاگها Introducing sites and blogs نمایش ها:20 زمان:۴-۱۶-۱۳۹۸
قواعد جدید در طراحی وب سایت
شروع کننده:sitecup آخرین پست توسط:sitecup پاسخ ها:0 عمومی General نمایش ها:31 زمان:۴-۱۶-۱۳۹۸
چگونه می توان آگهی بنر را در فتوشاپ Adobe ایجاد کرد
شروع کننده:sitecup آخرین پست توسط:sitecup پاسخ ها:0 عمومی General نمایش ها:48 زمان:۴-۱۶-۱۳۹۸
بررسی فرآیند User Onboarding در وب و موبایل
شروع کننده:sitecup آخرین پست توسط:sitecup پاسخ ها:0 مقالات آموزشی و کاربردی learning articles نمایش ها:33 زمان:۴-۲۳-۱۳۹۸
طراحی تکنولوژی های پوشیدنی و ارتباط آن با طراحی سایت
شروع کننده:sitecup آخرین پست توسط:sitecup پاسخ ها:0 خدمات Services نمایش ها:37 زمان:۴-۱۶-۱۳۹۸
معرفی چارچوب های وردپرس
شروع کننده:sitecup آخرین پست توسط:sitecup پاسخ ها:0 طراحی سایت Web design نمایش ها:55 زمان:۴-۵-۱۳۹۸
جهت حرکت: - سرعت: - (توقف | حرکت) - بارگذاری مجدد


ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امیتازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
چگونگی ایجاد فرم های ساده با SVG
نویسنده پیام
sitecup آفلاین
Junior Member
**

ارسال‌ها: 31
تاریخ عضویت: اسف ۱۳۹۵
اعتبار: 0
ارسال: #1
چگونگی ایجاد فرم های ساده با SVG
چگونگی ایجاد فرم های ساده با SVG


آموزش طراحی سایت

[تصویر:  %DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8...A7-SVG.jpg]

در گذشته، تنها فرمت تصویری که توسط تمام مرورگرها پشتیبانی می شد، GIF بود، یک فایل تصویری که توسط CompuServe طراحی شده بود. سپس فایل تصویری JPEG که فشرده سازی وحشتناکی بدون از بین رفتن جزئیات ارائه شد، اما در مقایسه با فرمت تصویر GIF بسیار کوچک است.


پس از مدتی، هدف گرافیک کامپیوتری بردار 2 بعدی بر روی وب ایجاد شد. با استفاده از فرمت های بسیار رقابتی که به W3C منتقل شد، SVG در نهایت در سال 1999 توسعه یافت.


حالا ما آموزش اشکال CSSرا منتشر کردیم، ما می خواستیم به شما نحوه ایجاد اشکال با SVG را نشان دهیم. این آموزش نحوه استفاده از SVG را در صفحات وب توضیح می دهد.
جعبه ابزار طراح شما
نامحدود دانلود: 500،000+ قالب وب، مجموعه آیکون، تم ها و طراحی دارایی

SVG، که برای گرافیک برداری مقیاس پذیر ، یک فرمت تصویر مبتنی بر XML برای وب است. بر خلاف فرمت های فایل تصویری GIF، PNG و JPEG، SVG مقیاس پذیر است، به این معنی که بدون توجه به چگونگی ضبط یا بزرگنمایی فایل تصویر، کیفیت همچنان خوب به نظر می رسد.


به عنوان یک فایل XML، SVG را می توان ایجاد، سفارشی و با دیگر استانداردهای W3C مانند DOM و XSL با استفاده از هر ویرایشگر متن سازگار کرد. تصاویر SVG همچنین می توانند با استفاده از برنامه های طراحی یا بردار مانند Adobe Illustrator، به صورت بصری ایجاد شوند.چرا از SVG استفاده می شود؟

SVG را می توان به راحتی در HTML با استفاده از برچسب های SVG تعبیه کرد. نحو زیر را در نظر بگیرید.


همانطور که می بینید، SVG دارای تگ های خاص خود است. SVG باید عرض و ارتفاع داشته باشد تا عنصر آن را داشته باشد. عناصر زیر می توانند در داخل بوم خود استفاده کنند.


بنابراین بگذارید این آموزش عالی را شروع کنیم.
ایجاد دایره در SVG

SVG های دایره ای را می توان با استفاده از برچسب دایره اجرا کرد. در اینجا یک مثال است.


تصویر حلقه SVG تصویر به نظر می رسد:





در این مثال، از تگ دایره استفاده کردم و سپس cx (مختصات x) و cy (y مختصات) را تعیین می کند که مرکز دایره را تعیین می کند. بعد، من مقدار 50 را در r(شعاع) قرار داده ام، که طول قطعه خط را از مرکز آن به محیط آن تعریف می کند. در نهایت، سبک های اضافه شده برای رنگ پر رنگ، سکته مغزی و سکته مغزی عرض را اضافه کردم که بسیار خود توضیحی است.
ایجاد یک مستطیل در SVG

مستطیل را می توان با استفاده از برچسب مستطیل اجرا کرد و می تواند انواع مختلف ارتفاع و عرض را بسازد. کد زیر را بررسی کنید.


تصویر حاصل از Rectangle SVG مانند این خواهد بود:




با استفاده از برچسب مستطیل، من عرض و ارتفاع مستطیل را تعریف می کنم. سپس rx و ry، اضافه شد که از لبه مستطیل دور می شود. شما می توانید این دو (rx و ry ) را حذف کنید اگر می خواهید لبه های تیز داشته باشید. بعد ما سبک ها را برای پر رنگ، رنگ سکته و عرض سکته اضافه کردیم.
ایجاد یک بیضوی در SVG

Ellipse SVG را می توان با استفاده از برچسب بیضی اجرا کرد. Ellips ها نیازی به ارتفاع و عرض ندارند و بر خلاف SVG دایره، شعاع ( cx و cy ) متفاوت است. کد زیر را در نظر بگیرید.


کد زیر را در نظر بگیرید.


تصویر Ellipse SVG به این صورت خواهد بود:


[تصویر:  10.jpg]


cx و cy مرکز مرکز بیضی را تعریف می کند در حالی که rx و ry شعاع بیضی را تعریف می کنند. همانطور که می بینید، rx عرض ابعاد را توضیح می دهد در حالی کهry توصیف می کند که چقدر بلند خواهد شد. سپس ما سبک ها را برای پر کردن رنگ، رنگ سکته و عرض سکته می کنیم.
ایجاد یک خط در SVG

خط SVG را می توان با استفاده از برچسب خط اجرا کرد. از نام خود، برچسب برای رسم خطوط استفاده می شود. مثال زیر را بررسی کنید.


تصویر خطی SVG تصویر به صورت زیر خواهد بود:


[تصویر:  15.jpg]


در این مثال، x1 ( محور x ) و y1 ( محور y ) نقطه شروع خط در حالی که x2 ( محور x ) و y2 ( محور y ) نقطه پایانی خط را تعریف می کنند. با استفاده از ویژگی سبک، من یک رنگ سکته مغزی سیاه و یک عرض 5 پیکسل ایجاد کردم.
ایجاد یک Polyline در SVG

یک SVG چند خطی را می توان با استفاده از برچسب چند خطی اجرا کرد. این برای رسم اشکال است که از خطوط مستقیم تشکیل شده است. در اینجا یک مثال است.


نتیجه نتیجه Polyline SVG مانند این خواهد بود:


[تصویر:  20.jpg]


با استفاده از x ( محور x ) و y ( y محور )، می توانید هر نقاط از خطوط برای ایجاد یک شکل خاصی که می خواهید. همانطور که می بینید، من 4 امتیاز را با خطوط پیوستم. من همچنین یک سکته مغزی سیاه و یک سکته مغزی عرض 3 پیک اضافه کردم.
ایجاد چندگانه در SVG

چندگانه SVG را می توان با استفاده از برچسب چند ضلعی اجرا کرد. این عنصر شکل را شکل می دهد که دارای بیش از 3 طرف است. کد زیر را بررسی کنید.


تصویر Polygon SVG نتیجه به نظر می رسد:


[تصویر:  25.jpg]


در Polygon SVG، نقاط توسط محور x و y برای هر طرف چند ضلعی از آخرین نقطه به آخرین تعریف می شود. در این مثال، من شش گوشه ای با 6 طرف ایجاد کردم. همانطور که می بینید، 6 امتیاز وجود دارد که با هم توسط x و y تعریف می شود. سپس رنگ پر رنگ سایه را پس از رنگ سکته مغزی قرمز و سکته مغزی عرض 1 پیک قرار داده ام.
ایجاد مسیر در SVG

مسیر SVG را می توان با استفاده از برچسب مسیر اجرا کرد. این عنصر مسیر پیشرفته و شکل هایی را که شامل منحنی ها، خطوط و قوس ها می باشد، جلب می کند. در میان تمام عناصر SVG، این یکی از کاربردی ترین و در عین حال سخت ترین روش برای یادگیری و دستکاری است. مسیر SVG از دستورات زیر استفاده می کند:


حروف بزرگ به این معنی است که موقعیت کاملا موقعیتی خواهد بود در حالی که حروف کوچک به معنای موقعیت نسبی هستند. مثال زیر را ببینید.


تصویر مسیر تصویر SVG مانند این خواهد بود:


[تصویر:  30.jpg]


از کد بالا، می توانید ببینید که از d نام استفاده می شود. این ویژگی d همیشه یک فرمان حرکت است. بعد از استفاده از M که به معنی حرکت به. قبل از اینکه بتوانید چیزی را جلب کنید، باید مکان نما مجازی را به مکان مورد نظر خود منتقل کنید.

بنابراین برای این مثال، من محور x را به 30 سفید محور y به 40 حرکت می دهم. منحنی از 140، -30 به عنوان نقطه شروع نقطه آستانه ما شروع می شود. بعد منحنی به سمت راست با نقاط 180، 90 و به پایان می رسد با 20، 160 به سمت راست اشاره دارد. برای نهایی کردن مسیر، یک خط با نقاط 120 و 160 ایجاد کردم.
ایجاد متن در SVG

متن SVG ها را می توان با استفاده از برچسب محصور شده با برچسب متن اجرا کرد. این عنصر برای نوشتن متن در تصویر SVG استفاده می شود.


تصویر Text SVG تصویر به صورت زیر خواهد بود:


[تصویر:  35.jpg]


در این مثال من موقعیت x محور متن را به 20 تنظیم می کنم. این متن 20 پیکسل را از سمت چپ قرار می دهد در حالی که من محدوده y را به 30 تنظیم می کنم که متن 30 پیکسل را از بالا قرار می دهد. بعد، رنگ پر رنگ آبی را تنظیم کردم و اندازه فونت را به 20 پیکسل تنظیم کردم. این متن "این نمونه عالی برای متن SVG است" را نمایش می دهد

src = "40.jpg


مقالات مرتبط





[تصویر:  %D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D9%...%D8%AF.jpg]

دستورالعمل های عکاسی طراحان وب که باید بدانند


[تصویر:  %D9%86%DA%A9%D8%A7%D8%AA-%DA%A9%D9%84%DB...%D8%AF.jpg]

نکات کلیدی در هنگام تشکیل یک تیم UX


[تصویر:  SEO-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84...%D9%86.jpg]

SEO موبایل - بهینه سازی برای تجربه کاربری و موترهای جستجو

طراحی سایت
۴-۱۶-۱۳۹۸ ۱۲:۳۰ صبح
یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان