SVG <rect>

SVG ມີສິນລະບົບຕົວອອກທີ່ຖືກກຳນົດທຳມະດາ, ທີ່ພວກພະນັກງານສາມາດໃຊ້ແລະດຳເນີນ.

SVG ຕົວອອກ

SVG ມີສິນລະບົບຕົວອອກທີ່ຖືກກຳນົດທຳມະດາ, ທີ່ພວກພະນັກງານສາມາດໃຊ້ແລະດຳເນີນ:

  • ຕົວອອກ <rect>
  • ຕົວອອກ <circle>
  • ຕົວອອກ <ellipse>
  • ຕົວອອກ <line>
  • ຕົວອອກ <polyline>
  • ຕົວອອກ <polygon>
  • ຕົວອອກ <path>

ຫນັງທີ່ຈະອະທິບາຍພວກນີ້, ຈະເລີ່ມຈາກສິນລະບົບຕົວອອກ

<rect> ກົນເຕີມ

<rect> ກົນເຕີມສາມາດຖ່າຍຕົວອອກຕົວອອກແລະຮູບຮ່າງຕົວອອກ

ເພື່ອເຂົ້າໃຈວ່ານັ້ນມີການເຮັດໃຊ້ວຽກງານ, ກະລຸນາສໍາເລັດການສໍາເລັດວຽກງານຈາກຄວີນ, ແລະເອົາສາຍບັນທຶກຈົນໄປຫາ ບັນທຶກ "rect1.svg". ຍັງຄວາມຫລາຍທີ່ສາມາດຈະສະແດງສູງສຸດ:

?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

ການອະທິບາຍວິທະຍານ:

  • ປະສົມ width ແລະ height ຂອງ rect ສາມາດກຳນົດຄວາມຫລາຍຂອງຕົວອອກແລະຄວາມວົງວຽງຂອງຕົວອອກ
  • ປະສົມ style ກຳນົດປະສົມ CSS
  • ປະສົມ fill ຂອງ CSS ກຳນົດສີລວມຕົວອອກ (ວ່ານັ້ນ rgb ຄຳນັກພິມ, ຊື່ສີຫຼືຄຳນວຍສີສີແຫຼວ)
  • ປະສົມ stroke-width ຂອງ CSS ກຳນົດຄວາມວົງວຽງຂອງຕົວອອກ
  • ປະສົມ stroke ຂອງ CSS ກຳນົດສີກະສັດຂອງຕົວອອກ

ທົດສອບຫຍັງນີ້

ພວກເຮົາຈະເບິ່ງຫຍັງຫຍັງກໍ່ມີປະສົມໃໝ່:

?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

ຄວາມອະທິບາຍຄື:

  • ຄວາມຄິດ x ກຳນົດຕອນຊ້າຍຂອງຕົວອອກ (ວ່ານັ້ນ x="0" ກຳນົດຄວາມຫ່າງຈາກຕົວອອກຫາປະຕູສະໝໍາພາບປະຕູພະລັງງານສີ່ສອງ: 0px)
  • ຄວາມຄິດ y ກຳນົດຕອນສູງຂອງຕົວອອກ (ວ່ານັ້ນ y="0" ກຳນົດຄວາມຫ່າງຈາກຕົວອອກຫາປະຕູສະໝໍາພາບປະຕູພະລັງງານສີ່ສອງ: 0px)
  • ປະສົມ fill-opacity ຂອງ CSS ກຳນົດຄວາມແປດສີລວມ (ສະຖານະທີ່ຖືກກຳນົດ: 0 - 1)
  • ປະສົມ stroke-opacity ຂອງ CSS ກຳນົດຄວາມແປດສີກະສັດ (ສະຖານະທີ່ຖືກກຳນົດ: 0 - 1)

ການເບິ່ງຄວາມຊີ້ແຈງ

ການສະແດງຄວາມແປດສະຫລັບສີຂອງສິ່ງສະແດງ:

?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

ການອະທິບາຍວິທະຍານ:

ການກຳນົດ opacity ຂອງ CSS ກຳນົດຄວາມຜ່ອນສະຫລາດຂອງປະກອບສະໜາມ (ການອະນຸຍາດຢູ່: 0 - 1)

ການເບິ່ງຄວາມຊີ້ແຈງ

ຄວາມຊີ້ແຈງສຸດທ້າຍ, ສ້າງຮູບກັບການກະຈາຍທີ່ສົມບູນ:

?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

ການອະທິບາຍວິທະຍານ:

rx ແລະ ry ການຂັດຂອງຮູບກັບການກະຈາຍທີ່ສົມບູນ.

ການເບິ່ງຄວາມຊີ້ແຈງ