آموزش SVG | قسمت سوم | مستطیل در SVG

آموزش SVG | قسمت سوم | مستطیل در SVGReviewed by رضا معظم on Jun 7Rating: 4.0آموزش SVG | قسمت سوم | مستطیل در SVGآموزش SVG | قسمت سوم | مستطیل در SVG

مستطیل در SVG

آموزش SVG | قسمت سوم | مستطیل در SVG

در قسمت سوم از سری آموزش های SVG میخواهیم به شما عزیزان رسم مستطیل در SVG را آموزش دهیم.

انواع اشکال SVG :

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

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

در ادامه ی این سری آموزش ابتدا عنصر rect را به شما معرفی میکنیم و باقی عناصر بالا را در اموزش های بعدی :

رسم مستطیل در SVG با <rect> :

همیار پروژه

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

مستطیل در SVGکد SVG شکل بالا:

راهنمای کدهای بالا:

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

همیار پروژه

مثال دو :

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

مستطیل در SVG

کد SVG شکل بالا:

راهنمای کدهای بالا:

  1. خصوصیت x، موقعیت مستطیل از سمت چپ را مشخص می کند( بعنوان مثال عبارت “x=”50 باعث می شود که مستطیل از حاشیه ی سمت چپ، 50px فاصله داشته باشد).
  2. خصوصیت y، موقعیت مستطیل را از سمت بالا مشخص می کند( بعنوان مثال عبارت “y=”20 باعث می شود که مستطیل از حاشیه ی بالا، 20px فاصله داشته باشد).
  3. خصوصیت fill-opacity میزان شفافیت رنگ درون مستطیل را مشخص می کند(باید یک مقدار بین 0 تا 1 باشد).
  4. خصوصیت stroke-opacity میزان شفافیت کادر دور مستطیل را مشخص می کند( باید یک مقدار بین 0 تا 1 باشد).
پیشنهاد ویژه :   دستورات کار با فایل ها در سی شارپ #C

همیار پروژه

مثال سه :

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

مستطیل در SVGکد SVG شکل بالا:

راهنمای کدهای بالا:

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

همیار پروژه

مثال چهار :

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

مستطیل در SVG

کد SVG شکل بالا:

راهنمای کدهای بالا:

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

 

منبع : www.w3schools.com

همیار پروژه SVG

دیدگاه خود را بیان کنید