SVG

SVG Polygon - <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" />

亲自试一试

ການອະທິບາຍລະບຽບ:

  • ທີ່ຢູ່ໃນ 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" />

亲自试一试

ຕົວຢ່າງ 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;" />

亲自试一试

ຕົວຢ່າງ 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;" />

亲自试一试