ایس وی جی <رکٹ>

شکل‌های 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>

آپ خود کوشش کریں

کد توجیہ:

• <rect> عناصر کا width اور height کا حصہ، مستطیل کی چوڑائی اور اوپر کا مقادیر درج کراتا ہے
• style کا حصہ، مستطیل کی CSS کی خاصیت کا مقادیر درج کراتا ہے
• CSS fill کا حصہ، مستطیل کی پینٹ کی رنگ کا مقادیر درج کراتا ہے
• CSS border-width کا حصہ، مستطیل کی کیرنل کی چوڑائی کا مقادیر درج کراتا ہے
• CSS 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" مستطیل کو چپ کی دامن سے 50 پی ایکس کی دوری پر رکھتا ہے)
• y کا حصہ، مستطیل کی اوپر کی پوزیشن کا مقادیر درج کراتا ہے (مثلاً y="20" مستطیل کو اوپر کی دامن سے 20 پی ایکس کی دوری پر رکھتا ہے)
• CSS fill-opacity کا حصہ، پینٹ کی رنگ کی شفافیت کا مقادیر درج کراتا ہے (قانونی دامن: 0 سے 1 تک)
• CSS border-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>

آپ خود کوشش کریں

کد توجیہ:

• CSS 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 کی خاصیت سے مستطیل کے کونوں کو دوار بنایا جاتا ہے