چکیده:
قبل از مطالعه این پست شما باید بدونید فرمت svg چیست؟ همچنین باید بدونید که چطور از تصاویر svg استفاده کنیم. در این پست با شما هستیم با آموزش رسم اشکال و خطوط پایه در SVG . قبل از هر چیز باید این نکته رو بدونید که نباید یک تصویر svg را از صفر با کد نویسی طراحی کرد مگر اینکه وقت زیادی داشته باشید! اغلب برای ایجاد تصاویر svg از نرم افزارهای خاصی استفاده میکنیم که هم سرعت بالاتر و هم کاریی بهتری دارند. هز طرفی کار کردن با اونها خیلی خیلی راحتره. اما باید بتونیم کدهای یک تصویر svg را تفسیر کنیم تا در صورت نیاز اونها رو اصلاح کنیم. یا برای ایجاد انیمیشن اونها رو تغییر بدیم. در انتهای بخش دوم مقاله یعنی آموزش ایجاد خطوط منحنی برخی از این نرم افزارها رو معرفی میکنیم
چهارگوش
تگ <rect> یک چهارگوش (مستطیل یا مربع) رسم میکنه پایین کد ایجاد چهار گوش هاست( یکی با گوشه های صاف و یکی با گوشه های گرد) و زیرش تصویری که کدها ایجاد کردند را میبینید.
<svg>
<rect x="10" y="10" width="200" height="100" fill="#b99b99" />
<rect x="10" y="220" width="200" height="100" rx="10" ry="10" fill="#b4eaee" />
</svg><rect> شش ویژ گی دارد؛
- x: موقعیت گوشه چپ و بالای چهار گوش را در محور افقی (X) تعیین میکند.
- y: موقعیت گوشه چپ و بالای چهار گوش را در محور عمودی (Y) تعیین میکند.
- width: عرض چهار گوش را تعیین میکند
- height: ارتفادع چهارگوش را تعیین میکند
- rx: برای گرد کردن گوشه ها چهار گوش استفاده می شود و شعاع افقی گرد شدگی را تعیین میکند ( شکل زیر را ببینید)
- ry: شعاع عمودی گرد شدگی را تعیین میکند.
دایره
به کمک المنت <circle> میتونیم یک دایره رسم گنیم. این کار با استفاده از تعیین یک نقطه مرکزی به کمک cx و cy و یک شعاع ، r شکل می گیرد.
<svg >
<circle cx="250" cy="250" r="200" fill="#b4eaee" />
</svg>- cx: موقعیت مرکز دایره را در محور افقی (X) تعیین میکند.
- cy: موقعیت مرکز دایره را در محور افقی (Y) تعیین میکند.
- r: شعاع دایره را مشخص می کند
بیضی
برای رسم بیضی از تگ <circle> استفاده می کنیم. نقطه مرکزی بیضی مانند دایره توسط ویژگی های cx , cy تعیین و شعاع افقی و عمودی آن به ترتیب توسط rx و ry مشخص می شود.
<svg >
<ellipse cx="150" cy="100" rx="150" ry="75" fill="#b99b99"/>
</svg>- cx: موقعیت مرکز بیضی را در محور افقی (X) تعیین میکند.
- cy: موقعیت مرکز بیضی را در محور افقی (Y) تعیین میکند.
- rx: شعاع بیضی در محور افقی (X) را مشخص می کند. شکل زیر را ببینید
- ry: شعاع بیضی در محور عمودی(Y) را مشخص می کند
خط
<line> با استفاده از مختصات (x,y) دو نقطه میتونیم یک خط رسم کنیم.
<svg >
<line x1="50" x2="350" y1="50" y2="350" stroke="#3a5a7a" stroke-width="5"/>
</svg>- x1: موقعیت افقی نقطه اول
- y1: موقعیت عمودی نقطه اول
- x2: جایگاه افقی نقطه دوم
- y2: وضعیت عمودی نقطه دوم
⚠️ در اشکالی که تا اینجا باهاشون آشنا شدیم اگر ویژگی fill که مربوط به رنگ زمینه است رو تعیین نکنیم شکل به صورت پیش فرض با رنگ سیاه نمایش داده میشه. اما خطی که مقدار stroke برای اون تعیین نشده باشه، نشان داده نمیشه همچنین میتونیم با ویژگی stroke-width ضخامت خط رو تعیین کنیم.
⚠️ میدونستید میشه با ویژگی stroke و stroke-width برای اشکال هم خط رسم کرد. به کد زیر و شکل حاصل از اون دقت کنید
<svg width="500" height="500">
<circle cx="250" cy="250" r="150" fill="#b4eaee" stroke="#3a5a7a" stroke-width="5" />
</svg>چندخطی (خطوط شکسته)
با استفاده از تگ <polyline> و با استفاده از ویژگی points میتونیم مختصات نقاط برای ایجاد خطوط شکسته متصل به هم ایجاد کنیم .
<svg width="500" height="500">
<polyline points="0,0 0,50 50,50 50,100 100,100 100,150 150,150 150,200 200, 200"
stroke="#3a5a7a" fill="white" stroke-width="5" />
</svg>⚠️ توجه داشته باشید که مختصات خطوط به صورت دو عدد که با کاما (,) از هم جدا شده اند مشخص می شود و مختصات هر نقطه با یک فاصله از مختصات نقطه دیگر مشخص می گردد
چند ضلعی
از <Polygon> برای ایجاد چند گوشه استفاده میشه و بسیار شبیه <polyline> است. با این تفاوت که در polygon به صورت پیش فرض یک خط نقطه ابتدایی و انتهایی رو به هم متصل میکنه و شکل ایجاد شده همیشه یک چند ضلعی بسته است. کد چند نمونه چند ضلعی و شکلهاشون رو در زیر میبینید
<svg height="400">
<polygon class="st0"points="158.9,213.7 134.2,208.5 115.8,225.9 113.2,200.7 91,188.7 114.1,178.4 118.7,153.5 135.6,172.3
160.6,169 148,190.9 " fill="#B99B98" stroke="#3a5a7a" stroke-width="3" />
<polygon class="st1" points="222.7,139.6 172.4,176.1 191.6,235.2 253.7,235.2 272.9,176.1 " fill="#3a5a7a"/>
<polygon class="st2" points="117.5,249.4 78.5,230.8 68.3,275.5 105.4,299.9 211.8,306.3 212.3,275.2 172.1,229.8 " fill="#abeaee" stroke="#3a5a7a"
stroke-width="1" />
</svg>
</p>جمع بندی
تا اینجا با آموزش رسم اشکال و خطوط پایه در SVG آشنا شدیم. در پست بعدی یاد میگیریم چطور با استفاده از path تصاویر پیچیده تر را رسم کنیم
