سبد (0)

رسم مستطیل در SVG

اَشکال SVG

SVG شامل تعدادی شکل از پیش تعریف شده است که می توانند توسط برنامه نویسان مورد استفاده قرار بگیرند:

  •  <rect> مستطیل
  •  <circle> دایره
  • <ellipse> بیضی
  • <line> خط
  • <polyline> چند خطی
  • <polygon> چندضلعی
  • <path> مسیر

در بخش های زیر، ابتدا از عنصر rect شروع می کنیم و سپس دیگر عناصر را نیز توضیح می دهیم.


مستطیل SVG با استفاده از <rect>

مثال 1

از عنصر <rect> برای ایجاد یک مستطیل و انواع مختلف آن، استفاده می شود.

در مثال زیر، کد SVG شکل مورد نظر را مشاهده می کند. 

مثال

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
خودتان امتحان کنید»

توضیح کد بالا:

  • خصوصیات width و height از عنصر <rect> به ترتیب عرض و ارتفاع مستطیل را مشخص می کنند. 
  • از خصوصیت style برای تعریف کردن ویژگی های سی اس اس مستطیل استفاده می شود. 
  • خصوصیت fill که بصورت css تعریف شده است، رنگ داخلی مستطیل را مشخص می کند. 
  • خصوصیت stroke-width عرض کادر دور مستطیل را مشخص می کند. 
  • خصوصیت stroke رنگ کادر دور مستطیل را مشخص می کند. 

مثال 2

اجازه دهید تا یک مثال دیگر را به همراه خصوصیات جدید، مورد بررسی قرار دهیم.

کد SVG این مثال در زیر قرار دارد:

مثال

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" /
>

</svg>
خودتان امتحان کنید »

توضیح کد بالا:

  • خصوصیت x، موقعیت مستطیل از سمت چپ را مشخص می کند( بعنوان مثال عبارت "x="50 باعث می شود که مستطیل از حاشیه ی سمت چپ، 50px فاصله داشته باشد).
  • خصوصیت y، موقعیت مستطیل را از سمت بالا مشخص می کند( بعنوان مثال عبارت "y="20 باعث می شود که مستطیل از حاشیه ی بالا، 20px فاصله داشته باشد).
  • خصوصیت fill-opacity میزان شفافیت رنگ درون مستطیل را مشخص می کند(باید یک مقدار بین 0 تا 1 باشد).
  • خصوصیت stroke-opacity میزان شفافیت کادر دور مستطیل را مشخص می کند( باید یک مقدار بین 0 تا 1 باشد).

مثال 3

در این مثال می آموزیم که چطور می توان میزان شفافیت را برای کل شکل(عنصر) تعیین کنیم. 

کد SVG را در زیر مشاهده می کنید:

مثال

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" /
>

</svg>
خودتان امتحان کنید»

توضیح کد بالا:

  • در اینجا خصوصیت سی اس اس opacity، میزان شفافیت را برای کُل عنصر یا شکل مشخص می کند( مقدار آن باید بین 0 تا 1 باشد).

مثال 4

در این مثال، یک مستطیل ایجاد می کنیم که گوشه های آن به صورت گرد شده هستند.

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

مثال

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /
>

</svg>
خودتان امتحان کنید »

توضیح کد بالا:

  • خصوصیات rx و ry گوشه های مستطیل را به صورت گرد شده درمی آورند. 
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان