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 خطًا إضافيًا "لإغلاق" سلسلة الخطوط.