---
title: SVG Shapes
localeTitle: أشكال SVG
---
## أشكال SVG

يمكن إنشاء أشكال متعددة باستخدام رسم SVG. يمكن استخدام رسم SVG وجمع سبعة أشكال: المسار ، المستطيل ، الدائرة ، البيضاوي ، الخط ، متعدد الخطوط ، و المضلع.

### مسار

عنصر `path` هو الأكثر شيوعًا ، ويتم إنشاؤه عادةً بواسطة البرامج المصممة لتصدير شفرة SVG.

 `  <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" /> 
` 

سينشئ `path` المثال أعلاه رمزًا "زائد" (+) عند استخدامه داخل رسم SVG. لا يتم إنشاء عناصر `path` SVG يدويًا ، ولكن يتم إنشاؤها من خلال برامج التصميم التي يمكنها معالجة الرسومات المتجهة ، مثل Illustrator أو Inkscape.

### مستطيل

يرسم مستطيل عنصر `rect` مستطيلاً على الشاشة ثم يقبل ستة سمات.

 `  <rect x="0" y="0" width="100" height="50" rx="10" ry="10" /> 
` 

`x` و `y` تعيين موضع الزاوية العلوية اليسرى من المستطيل ، `width` `height` يعين حجم المستطيل. `rx` و `ry` نصف قطر زوايا المستطيل ، على غرار الخاصية radius radius-border.

### دائرة

دائرة دائرة `circle` تقبل ثلاث سمات.

 `  <circle cx="100" cy="100" r="50" /> 
` 

`cx` و `cy` موضع مركز الدائرة ، ويعين `r` نصف قطر الدائرة (حجم) الدائرة.

### الشكل البيضاوي

يشبه عنصر القطع الناقص ، `ellipse` ، عنصر `circle` باستثناء أن نصف القطر ينقسم إلى سمتين.

 `  <ellipse cx="100" cy="100" rx="50" ry="20" /> 
` 

مرة أخرى ، `cx` و `cy` تعيين موضع مركز القطع الناقص ، والآن `rx` و `ry` نصف القطر الأفقي والعمودي للقطع الناقص ، على التوالي. سيعطي `rx` أكبر شكلًا بيضاويًا "شحميًا" ، وسيعطي " `ry` أكبر حجمًا شكلًا بيضاويًا. إذا كانت `rx` و `ry` متساويان ، `ry` دائرة.

### خط

عنصر `line` بسيط ، ويقبل أربع سمات.

 `  <line x1="0" x2="100" y1="50" y2="70" /> 
` 

تقوم `x1` و `y1` بتعيين النقطة الأولى من الخط ، بينما تقوم `x2` و `y2` بتعيين النقطة الثانية من الخط.

### شكل متعدد الخطوط

`polyline` هي سلسلة من الخطوط المستقيمة المتصلة ، يتم تعيينها في سمة واحدة.

 `  <polyline points="0 100, 50 70, 60 40, 20 0" /> 
` 

تقوم سمة `points` بتعيين قائمة بالنقاط ، حيث يتم فصل كل نقطة بفاصلة.

### المضلع

عنصر `polygon` هو أيضًا سلسلة من الخطوط المستقيمة المتصلة ، ولكن في هذه الحالة ، سيتم إعادة توصيل الخط الأخير تلقائيًا بالنقطة الأولى.

 `  <polygon points="0 100, 50 70, 60 40, 20 0" /> 
` 

سيقوم هذا المثال برسم نفس شكل `polyline` أعلاه ، ولكنه `polyline` خطًا إضافيًا "لإغلاق" سلسلة الخطوط.

## معلومات اكثر

وثائق [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes) : [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes)