SVG <rect>
- ບ່ອນຫນ້າກ່ອນ SVG in HTML
- ບ່ອນຫນ້ານີ້ SVG ເຄຣັກ
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 ການຂັດຂອງຮູບກັບການກະຈາຍທີ່ສົມບູນ.
- ບ່ອນຫນ້າກ່ອນ SVG in HTML
- ບ່ອນຫນ້ານີ້ SVG ເຄຣັກ