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

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

<SVG Rectangle – <rect:

از عنصر <rect> برای ایجاد انواع چهارضلعی ها مخصوصا مستظیل ها استفاده میشود. کد زیر را امتحان کنید تا متوجه منظوز ما بشین:

 <!DOCTYPE html>
<html>
<body>
<svg width=”400″ height=”110″><rect width=”300″ height=”100″ style=”fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)”>
Sorry, your browser does not support inline SVG.
</svg>
</body>

</html>

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

  • توسط صفت های width و height در عنصر <rect> اندازه های مستطیل رو تعیین میکنیم
  • با استفاده از عنصر style میتونیم ویژگی های CSS در مستطیل رو تعریف کنیم.
  • با کمک CSS fill میتونیم درون مستطیلمون رو رنگ کنیم.
  • ویژگی stroke-width در CSS عرض حاشیه مسطیل رو مشخص میکنه.
  •  ویژگی stroke رنگ حاشیه مستطیل رو معرفی میکنه.

در مثالی جدید صفت های جدید از عنصر <rect> رو باهم بررسی میکنیم

<!DOCTYPE html>
<html>
<body>
<svg width=”400″ height=”180″>

<rect x=”50″ y=”20″ width=”150″ height=”150″ style=”fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9″>
Sorry, your browser does not support inline SVG. 
</svg>
</body>
</html>

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

  • صفت x موقعیت از سمت چپ مستطیل رو تعیین میکنه. مثلا مستطیل 50 پیکسل از سمت چپ قرار میگیره.
  • صفت y موقعیت از بالای مستطیل تعیین میکنه. به عنوان مثال مستطیل 20 پیکسل از بالا قرار میگیره.
  • خاصیت fill-opacity  غلظت رنگ مستطیل رو تعیین میکنه و بین 0 تا 1 متغییر هست.
  • stroke-opacity غلظت خط حاشیه مستطیل رو تعیین میکنه و همچنین بین 0 تا 1 متغییر هست.

حالا میخوایم توسط یک عنصر غلظت کل مستطیل رو تغییر بدیم.

<!DOCTYPE html>
<html>
<body>
<svg width=”400″ height=”180″>

<rect x=”50″ y=”20″ width=”150″ height=”150″ style=”fill:blue;stroke:pink;stroke-width:5;opacity:0.5″>
Sorry, your browser does not support inline SVG. 
</svg>
</body>
</html>

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

  • با خاصیت opacity در CSS عنصر میتونیم غلظت کل عنصر رو مشخص کنیم. واین غلظت بین 0 تا 1 متغیر می باشد.

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

<!DOCTYPE html>
<html>
<body>
<svg width=”400″ height=”180″>

<rect x=”50″ y=”20″ rx=”20″ ry=”20″ width=”150″ height=”150″ style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

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

  • توسط صفت های rx و ry گوشه های مستطیل رو دور میدهیم.

با سپاس فراوان از همراهیتون.

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

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

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