SVG <path>

SVG ວົງການ - <path>

<path> ປະກອບສ່ວນສຳລັບວົງການ.

ຄຳສັ່ງທີ່ສາມາດນຳໃຊ້ໃນຂໍ້ມູນວົງການ:

  • M = moveto (ປ່ຽນຫລັງຄືນ)
  • L = lineto (ວົງການຫລັງຄືນ)
  • H = horizontal lineto (ວົງການຫລັງຄືນທີ່ທ້ອງຖິ່ນ)
  • V = vertical lineto (ວົງການຫລັງຄືນທີ່ສັງກັດ)
  • C = curveto (ວົງກາດ)
  • S = smooth curveto (ວົງກາດທີ່ພັດທະນາ)
  • Q = quadratic Bézier curve (ວົງກາດຊີຣ໌ສອງຄັ້ງ)
  • T = smooth quadratic Bézier curveto (ວົງກາດຊີຣ໌ສອງຄັ້ງທີ່ພັດທະນາ)
  • A = elliptical Arc (ວົງການອາວະນະທີ່ສາຍວົງ)
  • Z = closepath (ປິດວົງການ)

ຄຳເຫັນ: ທຸກຄຳສັ່ງທີ່ກ່າວກ່າວນີ້ກໍ່ສາມາດອະທິບາຍດ້ວຍພາສານ້ອຍ. ພາສານ້ອຍອະທິບາຍການຈັດການຕົວຫລັງຄືນ, ພາສາຫຼັກອະທິບາຍການຈັດການຕົວຢ່າງສະເພາະ.

ຕົວຢ່າງ 1

ຕົວຢ່າງດັ່ງກ່າວນີ້ອອກມາພົບວົງການສຳລັບຫລັງຄືນ, ຈຸດເລີ່ມທີ່ 150,0, ຫລັງຈາກນັ້ນຂຽນເຄື່ອງຫລັງຄືນມາ 75,200, ຕາມມາຈາກນັ້ນຂຽນເຄື່ອງຫລັງຄືນມາ 225,200, ຕາມມາຮັບຄືນຫລັງຄືນມາ 150,0.

这是 SVG 代码：

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />

亲自试一试

ຕົວຢ່າງ 2

ວົງການບາດຊີຣ໌(Bézier curves)ໃຊ້ສຳລັບຮູບຈຳລອງວົງການທີ່ສາມາດຂະຫຍາຍມາບໍ່ມີຈຳນວນຫຍັງ. ປົກກະຕິ, ຜູ້ນຳໃຊ້ຈະເລືອກຫອຍທີ່ສຸດສອງຫລັງຄືນ ແລະ ໜຶ່ງຫລັງຄືນຫລືສອງຫລັງຄືນ. ວົງກາດຊີຣ໌ທີ່ມີຫລັງຄືນຫລັງຄືນໜຶ່ງກໍ່ເອີ້ນວ່າວົງກາດຊີຣ໌ສອງຄັ້ງ(quadratic Bézier curve), ວົງກາດຊີຣ໌ທີ່ມີຫລັງຄືນຫລັງຄືນສອງກໍ່ເອີ້ນວ່າວົງກາດຊີຣ໌ສາມຄັ້ງ(cubic).

ນີ້ແມ່ນການສ້າງວົງການບານບົດບານສອງກັບ A ແລະ C ເປັນພື້ນທີ່ເລີ່ມແລະຈົບຫຼັງຈາກ B ເປັນພື້ນຄວບ:

A B C

这是 SVG 代码：

<svg height="400" width="450">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  <!-- 标记相关的点 -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- 给点添加标签 -->
  <g font-size="30" font-family="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>

亲自试一试

很复杂吧？是的！！！由于绘制路径非常复杂，强烈建议使用 SVG 编辑器来创建复杂图形。