همانطور که از ویژگی های مربوط به Fill برای رنگ کردن داخل یک شکل استفاده می کنیم، ویژگی های مربوط به Stroke به ما این قابلیت را می دهند تا دور یک عنصر را رنگ کنیم. Stroke یک Outline یا خط بیرونی برای عناصر SVG می باشد.
ویژگی stroke
ویژگی stroke
با استفاده از مقدار رنگی که می گیرد خط دور عنصر را ترسیم می کند. به عنوان نمونه انگور زیر یک خط بیرونی بنفش
stroke="#765373"
خواهد داشت:
<path class="grapes" fill="none" stroke="#765373" />
ویژگی stroke-width
با استفاده stroke-width
ضخامت یا همان عرض Stroke را تعیین می کنیم. در مثال بالا این عرض 6 پیکسل می باشد:
<path class="grapes" fill="none" stroke="#765373" stroke-width="6" />
مقدار پیشفرض برای این ویژگی 1
می باشد، همچنین می توان از واحدهای دیگر نیز برای تعیین این مقدار استفاده کرد.
اگر برای stroke-width
از واحد درصد استفاده شود آن درصد بر اساس Viewport فعلی تعیین می شود.
ویژگی stroke-linecap
از ویژگی stroke-linecap
برای تعیین شکل آخر یک Stroke استفاده می شود، مقادیری که این ویژگی می پذیرد شامل butt
، round
، square
و inherit
می باشند.
تصویر زیر این مقادیر را توصیف می کند:
در دموی زیر می توانیم مقدار این ویژگی را برای ساقه انگور تغییر دهیم و با آن بهتر آشنا شویم:
See the Pen stroke-linecap example by Mojtaba Seyedi (@seyedi) on CodePen.
ویژگی stroke-linejoin
ویژگی stroke-linejoin
تعیین می کند که گوشه های یک Stroke یا همان نقطه اتصال دو خط به چه شکلی ترسیم شوند. مقادیر این ویژگی می توانند miter
، round
، bevel
و inherit
باشند که در تصویر زیر توصیف شده اند:
در تصویر زیر به خط دور انگور توجه کنید که نقاط اتصال چگونه توسط مقدار bevel
تغییر شکل داده اند:
<svg>
<!--<path stroke-linejoin="bevel" <path for grapes> />-->
<!--<path <path for stem> />-->
<!--<path <path for leaf> />-->
</svg>
ویژگی stroke-miterlimit
وقتی برای ویژگی stroke-linejoin
از مقدار miter
استفاده کنیم و خطوط در یک زوایه تند به هم برسند این امکان وجود دارد که قسمت کلاه مانند بیشتر از ضخامت Stroke پیشروی کند که از ویژگی stroke-miterlimit
برای محدود کردن این پیشروی استفاده می کنیم.
به بیان دیگر این ویژگی تناسب بین قسمت کلاه مانند و ضخامت Stroke را محدود می کند و مقداری برابر با 1
و بزرگتر از آن را می پذیرد.
در مثال زیر برای انگور اول stroke-miterlimit="1.0"
و برای انگور دوم stroke-miterlimit="4.0"
تعیین شده اند.
می توانید در دموی زیر این مقدار را تغییر داده و نتیجه را بررسی کنید.
See the Pen stroke-miterlimit by Mojtaba Seyedi (@seyedi) on CodePen.
ویژگی stroke-dasharray
با استفاده از ویژگی stroke-dasharray
می توان Stroke را به حالت خط چین تبدیل کرد. این ویژگی یک آرایه ای از اعداد را برای تعیین اندازه تکه خط ها و فاصله بین آنها می پذیرد. به عنوان نمونه در مثال زیر تکه خط اول برابر با 30 و فاصله بعد از آن برابر با 5 است و این الگو تاجایی که فضا برای Stroke وجود داشته باشد تکرار می شود:
<line x1="0" y1="20" x2="250" y2="20"
style="stroke: #000000; fill:none;
stroke-width: 6px;
stroke-dasharray: 30 5" />
می توان الگوها را طولانی تر نوشت و خط چین متفاوتی بوجود آورد فقط کافی است تا اعداد را برای این ویژگی تعیین کنیم.
می توان برای جداسازی اعداد از ویرگول نیز استفاده کرد که خوانایی بهتری داشته باشند:
<line x1="0" y1="20" x2="600" y2="20"
stroke="#000"
stroke-width="3"
stroke-dasharray="10 4, 5 10, 1 1, 10 30" />
دموی زیر را بررسی کنید:
See the Pen stroke-dasharray by Mojtaba Seyedi (@seyedi) on CodePen.
ویژگی stroke-dashoffset
ویژگی stroke-dashoffset
یک مقدار می گیرد و آن مقدار نقطه آغاز رسم خط چین را مشخص می کند.
برای نمونه خط چین زیر را در نظر بگیرید:
<line x1="0" y1="20" x2="600" y2="20"
stroke="#000"
stroke-width="3"
stroke-dasharray="40 10" />
حال می خواهیم ویژگی stroke-dashoffset
را با مقدار 30
برای این خط تعیین کنیم:
<line x1="0" y1="20" x2="600" y2="20"
stroke="#000"
stroke-width="3"
stroke-dasharray="40 10"
stroke-dashoffset="30" />
این یعنی 30 واحد از خط چین اول رسم نخواهد شد و ترسیم بعد از 30 واحد شروع می شود که در نتیجه ما فقط 10 واحد از خط چین 40 واحدی اول را می بینیم:
پس توجه داشته باشید که این مقدار بین اول خط چین و اول مسیر فاصله نمی اندازد بلکه شروع ترسیم خط چین را به تاخیر می اندازد.
ویژگی stroke-opacity
آخرین ویژگی مربوط به Stroke ویژگی stroke-opacity
است که همانطور که از نامش پیداست میزان شفافیت Stroke را تعیین می کند که اعداد بین 0 تا 1 را می پذیرد و 0 باعث ناپدید شدن کامل Stroke می شود.
<line x1="0" y1="20" x2="600" y2="20"
stroke="#000"
stroke-width="3"
stroke-dasharray="40 10"
stroke-dashoffset="30"
stroke-opacity=".5"
/>
سلام استاد، وقت بخیر…
میخواستم در css دور خود متن یک stroke یا کادر مشکی بذارم…
امکانش هست راهنمایی کنید؟
خیلی ممنون میشم…
سلام،
https://css-tricks.ir/reference/border
همچنین:
https://css-tricks.ir/reference/outline