أحدث البرامج التعليمية وتطوير الشبكة
 

SVG <المضلع>


SVG مضلع - <المضلع>

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

مصنوعة المضلعات من الخطوط المستقيمة، والشكل هو "closed" (جميع خطوط الاتصال متابعة).

المضلع يأتي من اليونانية. "Poly" يعني "many" و "gon" وسائل "angle" .


مثال 1

المثال التالي بإنشاء مضلع مع ثلاث جهات:

عذرا، متصفحك لا يدعم SVG المضمنة.

هنا هو رمز SVG:

مثال

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
انها محاولة لنفسك »

Code explanation:

  • و points تحدد السمة x و y إحداثيات كل زاوية من زوايا المضلع

مثال 2

المثال التالي بإنشاء مضلع مع أربعة جوانب:

عذرا، متصفحك لا يدعم SVG المضمنة.

هنا هو رمز 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:

مثال

<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

تغيير خاصية ملء القاعدة "evenodd" :

عذرا، متصفحك لا يدعم SVG المضمنة.

هنا هو رمز 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>
انها محاولة لنفسك »