SVG <rect>

شكل SVG

SVG يحتوي على بعض العناصر المضمنة للشكل يمكن للمطورين استخدامها:

• المستطيل <rect>
• القرن <circle>
• الoval <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 لتحديد خصائص CSS المستطيل
• يحدد خاصية fill في CSS لون التعبئة المستطيل
• يحدد خاصية border-width في CSS عرض الحواف المستطيل
• يحدد خاصية stroke في CSS لون الحواف المستطيل

المثال 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 عن الهوامش العلوية الخارجية)
• يحدد خاصية fill-opacity في CSS درجة الشفافية لون التعبئة (المجال الصالح: 0 إلى 1)
• يحدد خاصية border-opacity في CSS درجة الشفافية لون الحواف (المجال الصالح: 0 إلى 1)

المثال 3

يحدد opacity لكل العنصر

هذا هو كود 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 في CSS درجة الشفافية للعنصر كله (المجال الصالح: 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 تجعل زوايا المثلثات تبدو دائرية