ວິທີການຂຽນຮູບພາບໃນການຫຼົບຫຼີ້ນ

ການຂຽນຮູບພາບໃນການຫຼົບຫຼີ້ນ

ການຂຽນຮູບພາບ SVG ແລະ JavaScript ໃນການຫຼົບຫຼີ້ນ - ສະບາຍວ່າມັນຕ້ອງເປັນ <path> ສິ່ງ:}}

ຄົນປະກອບ

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// ການກຳນາຍ <path> element ທີ່ມີ ID "triangle"
var triangle = document.getElementById("triangle");
// ການກຳນາຍຄວາມຍາວຂອງ <path> element
var length = triangle.getTotalLength();
// ການກະຈາຍຄວາມຍາວທີ່ເລີ່ມຕົ້ນຂອງການກະຈາຍ (ການກະຈາຍທີ່ສະແດງຄວາມຍາວ). ຕອນນີ້ກະຈາຍຄວາມຍາວທີ່ມີດີນີງດຽວກັນກັບຄວາມຍາວທີ່ວົງວອກ, ເພື່ອປິດຕາກະພິບມາກ່ອນ.
triangle.style.strokeDasharray = length;
/* ການກະຈາຍຄວາມຍາວທີ່ຫຼີກ. ໃນຕອນຕົ້ນກະຈາຍຄວາມຍາວທີ່ວົງວອກ, ເພື່ອປິດຕາກະພິບມາກ່ອນ.
ຕອນການຄົ້ນຫາຈະຫຼຸດລົງຢ່າງຫຼາຍເທື່ອເວລາ ແລະ ຈະສະແດງຕາກະພິບມາ.
ລຶບກັນກິດຈະກຳນີ້ຈະສະແດງຕາກະພິບມາກ່ອນການກະຈາຍຫຼັງຈາກການຄົ້ນຫາ.
triangle.style.strokeDashoffset = length;
// ການກວດສອບການຄົ້ນຫາຂອງປ່າວິດ ແລະ ການເອິ້ນຕາມການຄົ້ນຫາຂອງ myFunction ຕອນຄົ້ນຫາ.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // ການທຳນາຍຄວາມສູງຂອງການຄົ້ນຫາ = (ຄວາມສູງຂອງການຄົ້ນຫາ) / (ຄວາມຍາວທີ່ສາມາດຄົ້ນຫາໄດ້)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // ການທຳນາຍຄວາມຍາວທີ່ຄວນກະຈາຍ = ຄວາມຍາວ * ຄວາມສູງຂອງການຄົ້ນຫາ
  var draw = length * scrollpercent;
  // ຕອນຂັບຂື້ນຂອງການຄົ້ນຫາບໍ່ໄດ້ຮັບການກະຈາຍຫັນຫຼັງເຖິງຈະປົກຄອງຫຼັງຈາກຄວາມຍາວທັງໝົດຫຼັງຈາກຄວາມຍາວທີ່ຄວນກະຈາຍ.
  triangle.style.strokeDashoffset = length - draw;
}

亲自试一试

相关页面

教程：SVG 教程