بتوانید از فايل هاي پيوست به صورت نامحدود استفاده کنید.
اگر مصرف کننده هستید بتوانید از اعضای با تجربه انجمن مشاوره بگیرید.
اگر در کسب و کار مرتبط هستید به دیگران مشاوره بدهید تجربیات خود را با دیگران به اشتراک بگذارید و با مشتریان ارتباط بگیرید.
به تمام بخش هاي ويژه مخصوص کاربران سايت دسترسی پیدا کنید.


مهمان گرامی، خوش‌آمدید!
شما قبل از این که بتوانید در این انجمن مطلبی ارسال کنید باید ثبت نام کنید.


  

گذرواژه‌
  





جستجوی انجمن‌ها

(جستجوی پیشرفته)

آخرین موضوع‌ها
چگونه در ۱۵ دقیقه یک سایت...
انجمن:
آخرین ارسال توسط: hostcode
۱۳۹۸/۰۴/۲۳
» پاسخ: 0
» بازدید: 5
چگونه طراحان وب می توانند...
انجمن:
آخرین ارسال توسط: hostcode
۱۳۹۸/۰۴/۲۳
» پاسخ: 0
» بازدید: 8
تفاوت UI و طراحی UX چیست؟
انجمن:
آخرین ارسال توسط: hostcode
۱۳۹۸/۰۴/۲۳
» پاسخ: 0
» بازدید: 4
انواع لوستر بر اساس کاربر...
انجمن:
آخرین ارسال توسط: marmary
۱۳۹۸/۰۴/۲۲
» پاسخ: 0
» بازدید: 11
تالار شیک و ارزان
انجمن:
آخرین ارسال توسط: marmary
۱۳۹۸/۰۴/۱۸
» پاسخ: 0
» بازدید: 18
اسمارت واچ‌های جدید کدام ...
انجمن:
آخرین ارسال توسط: cluodi
۱۳۹۸/۰۴/۱۷
» پاسخ: 0
» بازدید: 20
کلاسیفایر
انجمن:
آخرین ارسال توسط: eh3an2010
۱۳۹۸/۰۴/۱۷
» پاسخ: 0
» بازدید: 33
گزینه‌های خرید لوازم جانب...
انجمن:
آخرین ارسال توسط: cluodi
۱۳۹۸/۰۴/۱۷
» پاسخ: 0
» بازدید: 21
گزینه‌های خرید لوازم جانب...
انجمن:
آخرین ارسال توسط: cluodi
۱۳۹۸/۰۴/۱۷
» پاسخ: 0
» بازدید: 21
گزینه‌های خرید لوازم جانب...
انجمن:
آخرین ارسال توسط: cluodi
۱۳۹۸/۰۴/۱۷
» پاسخ: 0
» بازدید: 23
گزینه‌های خرید لوازم جانب...
انجمن:
آخرین ارسال توسط: cluodi
۱۳۹۸/۰۴/۱۷
» پاسخ: 0
» بازدید: 21
گزینه‌های خرید لوازم جانب...
انجمن:
آخرین ارسال توسط: cluodi
۱۳۹۸/۰۴/۱۷
» پاسخ: 0
» بازدید: 23
گزینه‌های خرید لوازم جانب...
انجمن:
آخرین ارسال توسط: cluodi
۱۳۹۸/۰۴/۱۷
» پاسخ: 0
» بازدید: 22
گزینه‌های خرید لوازم جانب...
انجمن:
آخرین ارسال توسط: cluodi
۱۳۹۸/۰۴/۱۷
» پاسخ: 0
» بازدید: 20
گزینه‌های خرید لوازم جانب...
انجمن:
آخرین ارسال توسط: cluodi
۱۳۹۸/۰۴/۱۷
» پاسخ: 0
» بازدید: 22
بررسی طراحی سایت و رابط ک...
انجمن:
آخرین ارسال توسط: hostcode
۱۳۹۸/۰۴/۱۶
» پاسخ: 0
» بازدید: 27
چگونگی ایجاد فرم های ساده...
انجمن:
آخرین ارسال توسط: hostcode
۱۳۹۸/۰۴/۱۶
» پاسخ: 0
» بازدید: 31
قواعد جدید در طراحی وب سا...
انجمن:
آخرین ارسال توسط: hostcode
۱۳۹۸/۰۴/۱۶
» پاسخ: 0
» بازدید: 26
کاربردهای سیم خاردار که ن...
انجمن:
آخرین ارسال توسط: marmary
۱۳۹۸/۰۴/۱۱
» پاسخ: 0
» بازدید: 99
نکاتی برای بازسازی دکوراس...
انجمن:
آخرین ارسال توسط: sefidgroup
۱۳۹۸/۰۴/۱۱
» پاسخ: 0
» بازدید: 34
۷ مکمل خطرناک که باید درب...
انجمن:
آخرین ارسال توسط: marmary
۱۳۹۸/۰۴/۱۱
» پاسخ: 0
» بازدید: 89
دوره آموزش سئو امیر قمصری
انجمن:
آخرین ارسال توسط: fns4565
۱۳۹۸/۰۴/۱۱
» پاسخ: 0
» بازدید: 39
آموزش سئو سایت - نیوسئو
انجمن:
آخرین ارسال توسط: fns4565
۱۳۹۸/۰۴/۱۱
» پاسخ: 0
» بازدید: 36
مجتمع تجاری آرمیتاژ مشهد
انجمن:
آخرین ارسال توسط: fns4565
۱۳۹۸/۰۴/۱۱
» پاسخ: 0
» بازدید: 33
معرفی مجتمع تجاری کوهسر م...
انجمن:
آخرین ارسال توسط: fns4565
۱۳۹۸/۰۴/۱۱
» پاسخ: 0
» بازدید: 33

امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
چگونگی ایجاد فرم های ساده با SVG
#1
چگونگی ایجاد فرم های ساده با SVG
آموزش طراحی سایت
 

[تصویر: http://magbot.ir//%DA%86%DA%AF%D9%88%D9%...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 تصویر به نظر می رسد: 


[تصویر: http://magbot.ir/%da%86%da%af%d9%88%d9%8...-SVG/0.jpg]


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

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


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


[تصویر: http://magbot.ir/%da%86%da%af%d9%88%d9%8...-SVG/5.jpg]


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

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


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


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


[تصویر: http://magbot.ir/%da%86%da%af%d9%88%d9%8...SVG/10.jpg]


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

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


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


[تصویر: http://magbot.ir/%da%86%da%af%d9%88%d9%8...SVG/15.jpg]


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

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


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


[تصویر: http://magbot.ir/%da%86%da%af%d9%88%d9%8...SVG/20.jpg]


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

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


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


[تصویر: http://magbot.ir/%da%86%da%af%d9%88%d9%8...SVG/25.jpg]


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

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


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


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


[تصویر: http://magbot.ir/%da%86%da%af%d9%88%d9%8...SVG/30.jpg]


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


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

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


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


[تصویر: http://magbot.ir/%da%86%da%af%d9%88%d9%8...SVG/35.jpg]


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

src = "40.jpg
مقالات مرتبط
[تصویر: http://magbot.ir//%D8%AF%D8%B3%D8%AA%D9%...%D8%AF.jpg]

دستورالعمل های عکاسی طراحان وب که باید بدانند
[تصویر: http://magbot.ir//%D9%86%DA%A9%D8%A7%D8%...%D8%AF.jpg]

نکات کلیدی در هنگام تشکیل یک تیم UX
[تصویر: http://magbot.ir//SEO-%D9%85%D9%88%D8%A8...%D9%86.jpg]
SEO موبایل - بهینه سازی برای تجربه کاربری و موترهای جستجو
پاسخ


پرش به انجمن:


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