SVG <polygon>

SVG Poligon - <polygon>

<polygon> Ang elemento ay ginagamit para lumikha ng isang hugis na may sapat na gilid.

Ang poligon ay binubuo ng mga linya at ang hugis nito ay "nakapaligiran" (lahat ng linya ay nakakabit).

Ang salitang Polygon ay galing sa Griyego. "Poly" ay nangangahulugan ng "marami", at "gon" ay nangangahulugan ng "kulog".

Example 1

Ang sumusunod na halimbawa ay naglalikha ng tatlong gilid na poligon:

Ito ang SVG code:

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

亲自试一试

Paliwanag ng Code:

  • Ang points attribute ay nagtutukoy sa x at y coordinates ng bawat sulok ng poligon

Example 2

Ang sumusunod na halimbawa ay naglalikha ng apat na gilid na poligon:

Ito ang SVG code:

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

亲自试一试

Example 3

Gamit <polygon> Elemento na bumuo ng bituin:

Ito ang SVG code:

<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>

亲自试一试

Example 4

Gawing iba ang fill-rule attribute "evenodd":

Ito ang SVG code:

<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>

亲自试一试