شیوه ی رسم در 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>
خودتان امتحان کنید »<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>
خودتان امتحان کنید »<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>
خودتان امتحان کنید »<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>
خودتان امتحان کنید »<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>
- نوشته شده توسط احسان عباسی
- بازدید: 3912
