SVG ການສ້າງສະຫຼາຍ

SVG 径向渐变 - <radialGradient>

<radialGradient> ເອກະສານໃຊ້ເພື່ອກໍານົດການສະຫ�າກສີທີ່ສະເພາະ (ການສະຫ�າກສີທິດສະຫຼາກ)

<radialGradient> ເອກະສານຕ້ອງຈະຕິດຢູ່ <defs> ໃນເອກະສານ.<defs> ເອກະສານແມ່ນການກໍານົດຄວາມລະບຽບ (definitions) ທີ່ນ້າສະເພາະ, ກວມມີການກໍານົດເອກະສານພິເສດ (ອຸປະກອນກະຈາຍ ແລະອື່ນໆ)

ຕົວຢ່າງ 1

ອອກວິດີໂອອີກຄັ້ງໜຶ່ງທີ່ມີການສະຫຼາກສີທີ່ຈາກສີຂີ້ງໄປສີຫຼາຍ:

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

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

ພະຍາຍາມດີເທື່ອ

ການອະທິບາຍລະບຽບ:

• id ຂອງ <radialGradient> ກວມມີການກໍານົດຊື່ທີ່ສະເພາະຂອງການສະຫ�າກ
• cx, cy ແລະ r ກວມມີການກໍານົດສິນລະບາຍຂອງຊີວິດສູງສຸດ, fx ແລະ fy ກວມມີການກໍານົດສິນລະບາຍຂອງຊີວິດທີ່ນ້ອຍ
• ສີທີ່ຈະສະຫຼາກຂອງການສະຫຼາກສີສາມຫຼືຫຼາຍຫຼາຍມີສີຫຼາຍອັນດຽວໃນ <stop> ສະຫຼາກ
• ປະສົມອາດີດ offset ກວມມີການກໍານົດຕາຍການສີຂອງການສະຫຼາກ
• ປະສົມອາດີດ fill ກວມມີສິນລະບາຍຕົວອອກສີຂອງອັນສິນລະບາຍ

ຕົວຢ່າງ 2

ອອກວິດີໂອອີກຄັ້ງໜຶ່ງທີ່ມີການສະຫຼາກສີທີ່ຈາກສີຂີ້ງໄປສີຫຼາຍ:

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

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

ພະຍາຍາມດີເທື່ອ