74 lines
3.5 KiB
Markdown
74 lines
3.5 KiB
Markdown
---
|
|
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) |