در مقالات قبل در مورد تصاویر 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>
امیدواریم از مطالب این مقاله بهره کافی رو برده باشین. ممنون از همراهی شما.
نوشته SVG Stroke اولین بار در LeanFiles.Com Academy – Online Training Courses پدیدار شد.
مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
LeanFiles.Com Academy – Online Training Courses