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

اَشکال SVG

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

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

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

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

مثال 1

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

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

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

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

مثال 2

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

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

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

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

مثال 3

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

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

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

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

مثال 4

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

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

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

• خصوصیات rx و ry گوشه های مستطیل را به صورت گرد شده درمی آورند. 

• قبلی
• بعدی