SVG <مضلع>
مضلع SVG - <مضلع>
يُستخدم عنصر <polygon> لإنشاء رسم يحتوي على ثلاثة جوانب على الأقل.
تتكون المضلعات من خطوط مستقيمة ، والشكل "مغلق" (كل الخطوط متصلة ببعضها البعض).
يأتي المضلع من اليونانية. "بولي" تعني "كثير" و "غون" تعني "زاوية".
مثال 1
ينشئ المثال التالي مضلعًا بثلاثة جوانب:
هذا هو رمز SVG:
مثال
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
شرح الكود:
- تحدد سمة النقاط إحداثيات 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>