SVG <polygon>

SVG مركب - <polygon>

<polygon> العنصر يستخدم لإنشاء شكل يحتوي على على الأقل ثلاثة أضلاع.

المركب يتكون من خطوط مستقيمة ويكون شكله "مغلقًا" (كل الخطوط مرتبطة معًا).

كلمة Polygon تأتي من اللغة اليونانية. "Poly" تعني "العديد"، "gon" تعني "زاوية".

مثال 1

في هذا المثال يتم إنشاء مركب ذو ثلاثة أضلاع:

هذا هو رمز SVG:

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

تجربة بنفسك

توضيح الكود:

• يحدد خاصية points إحداثيات x و y لكل زاوية من المركب

مثال 2

في هذا المثال يتم إنشاء مركب ذو أربعة أضلاع:

هذا هو رمز SVG:

<svg height="250" width="500">
 <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

تجربة بنفسك

مثال 3

استخدام <polygon> إنشاء نجمة عن طريق العنصر:

هذا هو رمز SVG:

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

تجربة بنفسك

مثال 4

تغيير خاصية fill-rule إلى "evenodd":

هذا هو رمز SVG:

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

تجربة بنفسك