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

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

ویژگی های SVG Stroke :

SVG ها طیف گسترده ایی از ویژگی های stroke را ارائه می دهد. در زیر این ویژگی ها رو میتونین مشاهده کنید.

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-dasharray

همه این ویژگی های stroke برای هرنوع از خطوط،متن و خطوط خارجی عناصر مانند یک دایره میتونه اعمال بشه.

ویژگی stroke :

خصوصیات stroke ها تعریف کننده رنگ خط، متن یا خطوط خارجی یک عنصر میباشد. به کد مثال زیر دقت کنید و نحوه استفاده ازین ویژگی رو تماشا کنید. در این مثال ما سه خط با سه رنگ مختلف ایجاد کردیم.

<!DOCTYPE html>
<html>
<body>
<svg height=”80″ width=”300″>

<g fill=”none”>
<path stroke=”red” d=”M5 20 l215 0″ />
<path stroke=”black” d=”M5 40 l215 0″ />
<path stroke=”blue” d=”M5 60 l215 0″ />
</g>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

ویژگی stroke-width :

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

<!DOCTYPE html>
<html>
<body>
<svg height=”80″ width=”300″>

<g fill=”none” stroke=”black”>
<path stroke-width=”2″ d=”M5 20 l215 0″ />
<path stroke-width=”4″ d=”M5 40 l215 0″ />
<path stroke-width=”6″ d=”M5 60 l215 0″ />
</g>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

ویژگی stroke-linecap :

ویژگی stroke-linecap تعیین کننده انواع مختلف آغاز و پایان یک مسیر می باشد.

<!DOCTYPE html>
<html>
<body>
<svg height=”80″ width=”300″>

<g fill=”none” stroke=”black” stroke-width=”6″>
<path stroke-linecap=”butt” d=”M5 20 l215 0″ />
<path stroke-linecap=”round” d=”M5 40 l215 0″ />
<path stroke-linecap=”square” d=”M5 60 l215 0″ />
</g>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

ویژگی stroke-dasharray :

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

<!DOCTYPE html>
<html>
<body>
<svg height=”80″ width=”300″>

<g fill=”none” stroke=”black” stroke-width=”4″>
<path stroke-dasharray=”5,5″ d=”M5 20 l215 0″ />
<path stroke-dasharray=”10,10″ d=”M5 40 l215 0″ />
<path stroke-dasharray=”20,10,5,5,5,10″ d=”M5 60 l215 0″ />
</g>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

امیدواریم از مطالب این مقاله بهره کافی رو برده باشین. ممنون از همراهی شما.

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

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

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