آموزش SVG قسمت ۲
با دومین قسمت از آموزش فناوری SVG در خدمت شما هستیم. در این قسمت با نحو ابتدایی این فناوری آشنا شده و یک شکل ساده میسازیم. با ما همراه باشید.
برای استفاده از SVG در درون صفحات وب باید کدهای نوشته شده را داخل یک فایل HTML وارد کنیم. ساده ترین راه استفاده از روش Internal یا داخلی است یعنی کدهای SVG را مستقیما درون فایل HTML بنویسیم.
<html>
<body>
<svg></svg>
</body>
</html>
همانطور که میبینید برای استفاده از SVG در HTML باید از تگ SVG استفاده کنیم. این تگ یک تگ زوج (فرزند دار) است و کدهای SVG در درون تگ قرار میگیرند.
اولین نکته ای که باید در مورد این عنصر تعیین کنیم، ابعاد آن است. این کار میتواند با استفاده از HTML Attribute ها و یا CSS تعیین شود. ما برای سادگی کار با استفاده از روش اول ابعاد را تعیین میکنیم.
<svg width="150" height="150"></svg>
با این کار اندازه ی ناحیه ی گرافیکی SVG تعیین میشود. حال برای ایجاد اولین عنصر گرافیکی میخواهیم یک دایره طراحی کنیم.
همانطور که در قسمت قبل آموختید، SVG یک تکنولوژی XML-Based است یعنی کدهایی که ما مینویسیم از قوانین XML تبعیت میکنند لذا برای ایجاد دایره از تگ circle استفاده میکنیم.
<"svg width="150" height="150>
</ "circle cx="40" cy="40" r="35" stroke="red" fill="yellow>
<svg/>
- تگ circle یک تگ فرد (بدون فرزند) است و باید به درستی بسته شود.
- خاصیت cx، طول مختصات محل شروع ترسیم را مشخص میکند. حرکت به سمت راست جهت مثبت این محور را مشخص میکند.
- خاصیت cy، ارتفاع مختصات محل شروع ترسیم را مشخص میکند. حرکت به سمت پایین جهت مثبت این محور را مشخص میکند.(بر خلاف محورهای مختصات در ریاضیات!)
- خاصیت r، شعاع دایره را تعیین میکند.
- خاصیت stroke در اینجا رنگ حاشیه ی شکل را مشخص میکند.
- خاصیت fill، به زبان ساده رنگ دایره را تعیین میکند.
اگر کد بالا را در یک فایل با پسوند html. ذخیره کرده و توسط مرورگر اجرا کنید، نتیجه ی کار به شکل زیر است :
امیدواریم از قسمت دوم آموزش استفاده کرده باشید. منتظر قسمت بعدی باشید.