ویژگی Stroke در SVG

همانطور که از ویژگی های مربوط به 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"
         />

بیشتر بخوانید

• SVG Stroke