SVG ການສະຫລາຍສະເຕັກ

SVG ຫຼຸດລົງທາງວົງ

ຫຼຸດລົງທາງວົງແມ່ນການລະຫວ່າງສີຫຼາຍສີທີ່ປົກກະຕິ. ນອກຈາກນັ້ນ, ສາມາດນຳໃຊ້ການຫຼຸດລົງສີຫຼາຍສີໃນປະກອບຫຼາຍສິນລະພາບ.

SVG ມີສອງມືຖືຫຼຸດລົງທາງວົງຫຼາຍສິນລະພາບ:

• ຫຼຸດລົງທາງວົງ
• ຫຼຸດລົງທາງວົງຫຼອຍຫຼາຍສິນລະພາບ.

SVG ຫຼຸດລົງທາງວົງ - <linearGradient>

<linearGradient> ປະກອບສຳລັບການອອກພາບຫຼຸດລົງທາງວົງ.

<linearGradient> ປະກອບຕ້ອງໄດ້ນອນໃສ່ <defs> ໃນຕົວແທນ.<defs> ປະກອບທີ່ຕົກອອກ (definitions) ຂອງປະກອບສະເພາະ (ເຊັ່ນ: ສິ່ງເງົາ).

ການຫຼຸດລົງທາງວົງວອກວອກມູມສີຫຼາຍສີໃນທາງວົງວອກວອກມູມສີຫຼາຍສີໃນທາງວົງ

• ການສ້າງການຫຼຸດລົງທາງວົງວອກວອກມູມສີຫຼາຍສີໃນທາງວົງວອກວອກມູມສີຫຼາຍສີໃນທາງວົງ
• ການສ້າງການຫຼຸດລົງທາງວອກວອກມູມສີຫຼາຍສີໃນທາງວົງວອກວອກມູມສີຫຼາຍສີໃນທາງວົງ
• ການສ້າງການຫຼຸດລົງອອກມູມສຳລັບມູມສີຫຼາຍສີໃນທາງວົງວອກວອກມູມສີຫຼາຍສີໃນທາງວົງວອກວອກມູມສີຫຼາຍສີໃນທາງວົງ

ຕົວຢ່າງ 1

ການອອກພາບວົງປະກາດວົງພະຍາດຫຼາຍສີຈາກສີເງົາໄປສີສີນົມ:

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

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

ການທົດລອງ

ການອະທິບາຍຄວາມ

• ປະສົມອັບສັດ id ຂອງ ອັບສັດ <linearGradient> ສ້າງພວກມັນເພື່ອການກໍານົດຊື່ສະແພງສະແດງສີສັນຍາວົງທີ່ມີຄວາມຈິງ
• ປະສົມອັບສັດ x1, x2, y1, y2 ຂອງ ອັບສັດ <linearGradient> ສ້າງພວກມັນເພື່ອກໍານົດຕອນເລີ່ມແລະຕອນຈົບຂອງສີສັນຍາວົງ
• ການສະແດງສີສັນຍາວົງສາມາດປະກອບດ້ວຍສີສັນຍາວົງສອງຫຼືຫຼາຍສີ.
• ປະສົມອັບສັດ offset ສ້າງພວກມັນເພື່ອການກໍານົດຕອນເລີ່ມແລະຕອນຈົບຂອງສີສັນຍາວົງ
• ປະສົມອັບສັດ fill ສ້າງພວກມັນເພື່ອສັນຍາວົງປະກອບ

ຕົວຢ່າງ 2

ການສະແດງສັນຍາວົງປະກອບດ້ວຍການສະແດງສີສັນຍາວົງທີ່ຈະປ່ຽນຈາກສີເຫຼືອກາຍໄປສີສີແດງທີ່ຕາມການປົກຄອງ:

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

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

ການທົດລອງ

ຕົວຢ່າງ 3

ການສະແດງສັນຍາວົງປະກອບດ້ວຍຄວາມຄິດທີ່ຢູ່ໃນວົງປະກອບດັ່ງກ່າວນີ້ ພ້ອມທັງການສະແດງຄວາມຄິດທີ່ມີການສະແດງສີສັນຍາວົງທີ່ຈະປ່ຽນຈາກສີເຫຼືອກາຍໄປສີສີແດງ:

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

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

ການທົດລອງ

ການອະທິບາຍຄວາມ

• <text> ສະແດງຄວາມ