سبد (0)

شیوه ی رسم در SVG

خصوصیات شیوه ی رسم در SVG

SVG تعداد زیادی خصوصیت را برای ایجاد شیوه های رسم مختلف، ارائه می دهد. در این فصل به موارد زیر می پردازیم:

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

تمامی خصوصیات شیوه ی رسم می توانند به هرنوع خط، یا متن یا خطوط دور عناصری همچون دایره، اضافه شوند. 


خصوصیت stroke در SVG

خصوصیت stroke درواقع رنگ یک خط یا متن یا کادر درور عناصر را مشخص می کند:

کد SVG شکل بالا، در زیر قرار دارد:

مثال

<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>
</svg>
خودتان امتحان کنید »

خصوصیت stroke-width در SVG

خصوصیت stroke-width ضخامت یک خط یا کادر دور عناصر را مشخص می کند:

کد SVG در زیر قرار دارد:

مثال

<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>
</svg>
خودتان امتحان کنید »

خصوصیت stroke-linecap در SVG

خصوصیت stroke-linecap باعث می شود تا برای یک رسم باز شده، حالت ابتدا یا انتهای آن رسم را مشخص کنیم:

کد SVG شکل مورد نظر در زیر قرار دارد:

مثال

<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>
</svg>
خودتان امتحان کنید »

خصوصیت stroke-dasharray در SVG

از خصوصیت stroke-dasharray برای ایجاد خط ها به صورت فاصله دار، استفاده می شود:

کد SVG در زیر قرار دارد:

مثال

<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>
</svg>
خودتان امتحان کنید »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان