بخش مقالات آکادمی | Articles
آخرین آموزش ها

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

<SVG Polyline – <polyline:

polyline در لغت به معنی چند خطی می باشد. برای ساختن SVG اون باید از عنصر <polyline> استفاده کنیم. این عنصر بیشتر برای اشکالی استفاده میشه که از چند خط مستقیم شامل شده. کد SVG اون به شکل زیر است:

<!DOCTYPE html>
<html>
<body>
<svg height=”200″ width=”500″>
<polyline points=”20,20 40,25 60,40 80,120 120,140 200,180″
style=”fill:none;stroke:black;stroke-width:3″ />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

مثال دیگری از خطوط مستقیم رو در زیر آوردیم. تا بوجود آوردنده ایده های جدید برای استفاده ازون باشه:

<!DOCTYPE html>
<html>
<body>
<svg height=”180″ width=”500″>
<polyline points=”0,40 40,40 40,80 80,80 80,120 120,120 120,160″ style=”fill:white;stroke:red;stroke-width:4″ />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

<SVG Circle – <circle:

همونطور که میدونید circle به معنای دایره می باشد. برای ساختن یک دایره در SVG باید از عنصر <circle> استفاده کنیم. به کد زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>
<svg height=”100″ width=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”black” stroke-width=”3″ fill=”red” />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

توضیح کد بالا:

  • صفت های cx و cy مختصات x و y مرکز دایره تعریف میکنه و اگه اون حذف بشه به طور پیشفرض (0و0) تنظیم میشه.
  • صفت r شعاع دایره رو تعیین میکنه.

<SVG Ellipse – <ellipse:

elipse به معنی بیضی است و برای ساختن اون در SVG ها باید از عنصر <elipse> استفاده بشه. بیضی ها شبیه به دایره ها هستند با این تفاوت که در بیضی ها، شعاع x با شعاع y متفاوت است در صورتی که در دایره ها برابر هستند. کد زیر یک بیضی برای ما میسازه:

<!DOCTYPE html>
<html>
<body>
<svg height=”140″ width=”500″>
<ellipse cx=”200″ cy=”80″ rx=”100″ ry=”50″ style=”fill:yellow;stroke:purple;stroke-width:2″ />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

توضیح کد بالا:

  • صفت cx مختصات طولی مرکز بیضی رو تعریف میکنه
  • صفت cy مختصات عرضی مرکز بیضی رو تعریف میکنه
  • rx شعاع افقی رو مشخص میکنه
  • ry شعاع عمودی رو مشخص میکنه

با قرار دادن کد زیر چند بیضی با رنگ های متفاوت روی هم ایجاد میکند:

<svg height=”150″width=”500″>
  <ellipse cx=”240″ cy=”100″rx=”220″ ry=”30″style=”fill:purple” />
  <ellipse cx=”220″ cy=”70″rx=”190″ ry=”20″style=”fill:lime” />
  <ellipse cx=”210″ cy=”45″rx=”170″ ry=”15″style=”fill:yellow” />
</svg>

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

<svg height=”100″width=”500″>
  <ellipse cx=”240″ cy=”50″rx=”220″ ry=”30″style=”fill:yellow” />
  <ellipse cx=”220″ cy=”50″rx=”190″ ry=”20″style=”fill:white” />
</svg>

ممنون از همراهیتون. در مقاله های بعد به ترسیم اشکال بیشتر در SVG ها میپردازیم.

تاریخ ارسال
30 اردیبهشت 1395
ارسال شده توسط
محمدرضا تناکیان
میزان بازدید
0 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
حجم و فرمت :

0 دیدگاه ثبت شده

شما هم نظری بدهید
هنوز دیدگاهی ثبت نشده
توجه فرمایید:
نظرات شما پس از بررسی و تایید نمایش داده می شود.
لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.