3.5 KiB
title | localeTitle |
---|---|
SVG Shapes | أشكال 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
خطًا إضافيًا "لإغلاق" سلسلة الخطوط.