SVG <rect>

SVG ປະກອບສິ່ງ

SVG ມີປະກອບສິ່ງຕົວອອກທີ່ອະນຸຍາດໃຫ້ນັກພັດທະນາໃຊ້:

  • ຕາຕະລາງ <rect>
  • ວົງທາງວຽນ <circle>
  • ວົງທາງອັນສາຍ <ellipse>
  • ວົງທາງທະວີບ <line>
  • ວົງທາງປອດ <polyline>
  • ຕາຕະລາງຫຼາຍວຽນ <polygon>
  • ວົງທາງ <path>

ຫຼັງຈາກນີ້ບັນຫາຈະເລີ່ມອອກຈາກປ້ອງ rect ເພື່ອອະທິບາຍປະກອບສິ່ງໃດກໍ່ຕາມ.

SVG ຂອງຕາຕະລາງ - <rect>

ຕົວຢ່າງ 1

<rect> ປະສານງານ <rect> ກຳນົດປະກອບຫົວຂໍ້ສ້າງບາຍບອກບາຍບົກ ແລະ ພາບວຽງບາຍບອກບາຍບົກ

ບໍ່, ເຄືອຂ່າຍຂອງທ່ານບໍ່ສາມາດສະຫຼາກ SVG ບັນຊີອອກຢູ່ບໍລິສັດໄດ້.

ນີ້ແມ່ນ ລະບັບ SVG:

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />

亲自试一试

代码解释：

  • ປະສານງານ width ແລະ height ຂອງ ປະສານງານ <rect> ກຳນົດຂະໜາດຂອງບາຍບອກບາຍບົກ
  • ປະສານງານ style ກຳນົດປະສານງານ CSS ບາຍບອກບາຍບົກ
  • ປະສານງານ fill CSS ກຳນົດສີມີສີຈະລົດບາຍບອກບາຍບົກ
  • ປະສານງານ border-width CSS ກຳນົດຄວາມເລັກນິຍົມບອກສະນະບາຍບອກບາຍບົກ
  • ປະສານງານ stroke CSS ກຳນົດສີບອກສະນະບາຍບອກບາຍບົກ

ຄູ່ຄວາມ 2

ພວກເຮົາຈະເບິ່ງຄັ້ງອື່ນທີ່ມີປະສານງານໃໝ່:

ນີ້ແມ່ນ ລະບັບ SVG:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />

亲自试一试

代码解释：

  • ປະສານງານ x ກຳນົດທີ່ຕັ້ງຂອງບາຍບອກບາຍບົກທາງປີກ (ຕົວຢ່າງ x="50" ຈະປັບບາຍບອກບາຍບົກທີ່ຫ່າງຈາກປຸກທາງປີກ 50 px)
  • ປະສານງານ y ກຳນົດທີ່ຕັ້ງຂອງບາຍບອກບາຍບົກ (ຕົວຢ່າງ y="20" ຈະປັບບາຍບອກບາຍບົກທີ່ຫ່າງຈາກປຸກທາງເທິງ 20 px)
  • ປະສານງານ fill-opacity CSS ກຳນົດຄວາມມີສະຫລາກຂອງສີມີສີຈະລົດ (ສະຖານະປະສົງ: 0 ຫາ 1)
  • ປະສານງານ border-opacity CSS ກຳນົດຄວາມມີສະຫລາກຂອງລັກສະນະສີບອກ (ສະຖານະປະສົງ: 0 ຫາ 1)

ຄູ່ຄວາມ 3

ກຳນົດຄວາມມີສະຫລາກຂອງປະກອບຫົວຂໍ້:

ນີ້ແມ່ນ ລະບັບ SVG:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />

亲自试一试

代码解释：

  • ປະສານງານ opacity CSS ກຳນົດຄວາມມີສະຫລາກຂອງປະກອບຫົວຂໍ້ (ສະຖານະປະສົງ: 0 ຫາ 1)

ຄູ່ຄວາມ 4

ຄັ້ງຫຼ້າສຸດແມ່ນການສ້າງບາຍບອກບາຍບົກ:

ນີ້ແມ່ນ ລະບັບ SVG:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

亲自试一试

代码解释：

  • rx 和 ry 属性使矩形的角变圆