رسم مثلث باستخدام SVG <polygon>

تعريف العلامة <polygon> شكل متعدد الجوانب مكون من مجموعة من الخطوط المستقيمة المتصلة ببعضها البعض بغرض تكوين شكل مفرغ، حيث يتم ربط النقطة الأخيرة بالنقطة الأولى. عادة ما تستخدم العلامة <polygon> لرسم أشكال تحتوي على جوانب/حواف متعددة (ثلاثة أو أكثر).

مثال على رسم مكعب SVG

هذا مثال بسيط على SVG Polygon:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon points="10,0    60,0    35,50"
　　　　　　　　　style="stroke:#660000;    fill:#cc3333;"/>
</svg>

هذا هو التأثير بعد تشغيله:

قد لاحظت أن حتى إذا تم ذكر ثلاثة نقاط فقط، تم رسم جميع ثلاثة الجوانب. هذا بسبب أن علامة <polygon> ترسم خطوط بين جميع النقاط، بما في ذلك خط من النقطة الأخيرة إلى النقطة الأولى. العلامة <polyline> لن ترسم خطًا من النقطة الأخيرة إلى النقطة الأولى. يبدو أن هذا هو الفرق الوحيد بين علامتي <polygon> و <polyline>.

رسم مكعب ست جوانب

كود المثال كما يلي:

<svg width="120" height="120" viewPort="0    0    120    120" version="1.1"　　　　
xmlns="http://www.w3.org/2000/svg">　　　　
<polygon points="60,20    100,40    100,80    60,100    20,80    20,40"/>　　　　
</svg>

النتيجة بعد التنفيذ كالتالي

رسم مكعب ثماني جوانب

هذا مثال أكبر-مكعب ذو ثمانية جوانب:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon points="50,5    100,5    125,30    125,80    100,105"
　　　　　　　　　　　　　　　　　　　50,105　25,80　25,30"
　　　　　　　　　　style="stroke:#660000; fill:#cc3333; stroke-width: 3;"/>
</svg>

رسم نجمة باستخدام SVG

كود المثال كما يلي:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
　　<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
</svg>

هذا هو التأثير بعد تشغيله: