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

در HTML5 شما میتونین تصاویر SVG  رو مستقیما داخل کدتون قرار بدین. در زیر یک مثال ساده از گرافیک SVG براتون آوردیم:

<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

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

  • یک عکس SVG با عنصر <svg> آغاز میشه.
  • صفت طول وعرض عنصر <svg> با width و height عکس SVG تعریف میشه.
  • عنصر <circle> برای ترسیم دایره استفاده  میشه.
  • مختصات مرکز دایره رو با صفت های cx و cy میتونیم تعیین کنیم. اگر cx و cy حذف بشن، مرکز دایره (0و0) تنظیم میشه.
  • صفت r تعیین کننده شعاع دایره می باشد.
  • صفت های stroke و stroke-width چگونه بودن خط خارجی شکل رو تعیین میکنن. ما در مثال دایره ایی که زدیم، عرض خط حاشیه رو 4 پیکسل و رنگ اونو سبز قرار دادیم.
  • صفت fiil اشاره به رنگ داخلی دایره داره. و ما اونو زرد تنظیم کردیم.
  • بسته شدن عکس های <svg> با تگ <svg/> انجام میشود.

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

اشکال در SVG:

تعریف های از قبل تعیین شده ایی در SVG وجود داره که میتونه توسط توسعه دهنده ها استفاده بشه:

  • Line <line>
  • Polyline <polyline>
  • Circle <circle>
  • Elipse <elipse>
  • Rectangle <rect>
  • Polygon <polygon>
  • Path <path>

ما قصد داریم تمامی عنصار بالا رو براتون توضیح بدیم و شروع کار رو با عنصز line میکنیم:

<SVG <line:

از عنصر <line> جهت ایجاد یک خط استفاده میکنیم. کد زیر یک خط ایجاد میکند:

<!DOCTYPE html>
<html>
<body>
<svg height=”210″ width=”500″>

<line x1=”0″ y1=”0″ x2=”200″ y2=”200″ style=”stroke:rgb(255,0,0);stroke-width:2″ />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

توضیح کد:

  • توسط صفت x1 ما مشخص میکنیم که خط از اون نقطه برروی مخور x استارت بخوره.
  • توسط صفت y1 ما مشخص میکنیم که حط از اون نقطه برروی محور y استارت بخوره.
  • با استفاده از صفت x2 ما پایان خط برروی محور x رو مشخص میکنیم.
  • با استفاده از صفت y2 ما پایان خط برروی محور y رو مشخص میکنیم.

اگر به تصاویر svg علاقه مند شدید دیدن این آموزش نیز به شما پشنهاد میشود .

در ادامه سری مقالات در مورد SVG و گرافیک در HTML با ترسیم اشکال مختلف آشنا بشین.

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

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

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