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>

آزمایش کنید