SVG Stroke

نوشته شده توسط: adminدر تاریخ: خرداد ۱۱, ۱۳۹۵در: آموزشیبازدید: 514 بازدید

در مقالات قبل در مورد تصاویر 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>