SVG <rect>

SVG আকৃতি

SVG-এর একটি প্রকৃতির আকৃতি ইলেকট্রনসমূহ উন্নয়নকারীদের ব্যবহারের জন্য পূর্বনির্ধারিত আকৃতি রয়েছে:

• আকৃতি <rect>
• বৃত্ত <circle>
• অবকৃতি <ellipse>
• সরল লাইন <line>
• ফাঁকা লাইন <polyline>
• বহুকোণা <polygon>
• পথ <path>

আগামী অধ্যায়গুলোতে rect ইলেকট্রনের সঙ্গে প্রত্যেক ইলেকট্রন ব্যাখ্যা করা হবে。

SVG আকৃতি - <rect>

উদাহরণ ১

<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 px বামস্থানে স্থাপন করে)
• y প্রয়োগ চতুর্ভুজের উপরিস্থ স্থানকে নির্দেশ করে (উদাহরণ: y="20" চতুর্ভুজকে 20 px উপরিস্থ স্থানে স্থাপন করে)
• 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 คุณสมบัติทำให้มุมสี่เหลี่ยมกลมเป็นทรงกลม