SVG ການສາຍຫຼວງ

SVG 渐变ຕ້ອງກໍານົດໃນ <defs>.

SVG 渐变

ການສະພານແມ່ນການສະພານສີຈາກສີໜຶ່ງໄປສີໜຶ່ງຢ່າງສະພາບ. ພ້ອມກັນ, ທ່ານສາມາດນຳມານວນສີຫຼາຍສຳລັບສິ່ງດຽວ.

ໃນ SVG, ມີສອງຊະນິດສະພານຫຼາຍສຳລັບ:

  • ການສະພານສະເປັກ
  • ການສະພານສີຫຼອກ

ການສະພານສະເປັກ

<linearGradient> ສາມາດກໍານົດການສະພານສະເປັກ SVG.

<linearGradient> ອາດກວມເຂົ້າໃນແບບ <defs> <defs> ອາດຖືກກໍານົດວ່າ definitions, ທີ່ສາມາດກໍານົດບັນດາສິ່ງພິເສດອີງວ່າ ການສະພານ.

ການສະພານສະເປັກສະພານສາມຫຼາຍສາມຫຼາຍສີ:

  • ຖ້າ y1 ແລະ y2 ຮອດກັນ, ແລະ x1 ແລະ x2 ບໍ່ຮອດກັນ, ທ່ານສາມາດສ້າງການສະພານທີ່ຍົກເຍົາ.
  • ຖ້າ x1 ແລະ x2 ຮອດກັນ, ແລະ y1 ແລະ y2 ບໍ່ຮອດກັນ, ທ່ານສາມາດສ້າງການສະພານທີ່ຕໍ່າຢ່າງຕົວຢູ່.
  • ຖ້າ x1 ແລະ x2 ບໍ່ຮອດກັນ, ແລະ y1 ແລະ y2 ບໍ່ຮອດກັນ, ທ່ານສາມາດສ້າງການສະພານດາວກັບຫົວຂ້ອງ.

ການສິ້ນສົບວິທີດັ່ງຕໍ່ມາໃສ່ເອກະສານເວລາຄົນຮ້ອງ. ບັນທັດເອກະສານວ່າ "linear1.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">
<defs>
<linearGradient id="orange_red" 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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

ການອະທິບາຍວິທີ:

  • id ຂອງ <linearGradient> ອາດກໍານົດຊື່ທີ່ມີຄວາມອັນສະນະຫຼາຍສຳລັບການສະພານ.
  • fill:url(#orange_red) ອາດທາງຕີງ ellipse ອີງວ່າການສະພານ.
  • ບັນດາ x1, x2, y1, y2 ຂອງ <linearGradient> ອາດກໍານົດສະຖານທີ່ເລີ່ມແລະສິບສຸດຂອງການສະພານ.
  • ການສະພານສີລະຫວ່າງສາມຫຼືຫຼາຍສີສາມຫຼາຍສີ. ທຸກສີສາມຫຼາຍສີຈະຖືກກໍານົດໂດຍ <stop> ອີງວ່າ offset ຈະນຳມາກໍານົດສະຖານທີ່ເລີ່ມແລະສິບສຸດຂອງການສະພານ.

ບົດຢ່າງ (ການສະພານສີລະຫວ່າງທີ່ຍົກເຍົາ)

ບົດຢ່າງອື່ນ

<?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">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

ການເບິ່ງຕົວຢ່າງ (ການສາຍລັງສະຕາກທີ່ຕໍ່າດາວ)